Как выбрать нажатую кнопку, чтобы изменить ее классы
Я хочу скрыть две кнопки и показать другие кнопки при нажатии кнопки редактирования, но проблема в том, что когда я нажимаю кнопку редактирования, все кнопки в таблице реагируют на это событие.
Я использовал $(this) для выбора нажатой кнопки, но она работает только для кнопки редактирования, а другая кнопка не следует этому правилу.
$(document).on('click', ".cat-edit-btn", function() {
$(this).toggleClass("d-inline d-none");
$(this).parent().parent().parent().find("tr").find(".cat-delete-btn").toggleClass("d-inline d-none");
$(this).parent().find($(".cat-sub-btn").toggleClass("d-inline d-none"));
$(this).parent().find($(".cat-cancell-btn").toggleClass("d-inline d-none"));
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class = "table table-bordered bg-info table-striped text-center" style = "direction:rtl; text-align:right !important;">
<thead style = "font-size: 16px">
<tr style = "color: white; background-color: darkcyan">
<th>#</th>
<th>پیش نمایش</th>
<th>نام کاتالوگ</th>
<th>دسته بندی</th>
<th>زبان</th>
<th>تاریخ انتشار</th>
<th>توضیحات</th>
<th colspan = "3">مدیریت</th>
</tr>
</thead>
<tbody style = "font-size: 15px">
<tr>
<td>پیش نمایش</td>
<td>@item.CATALOG_TITLE</td>
<td>@item.CATALOG_CATEGORY</td>
<td>@item.CATALOG_CATEGORY</td>
<td>
<span>انگلیسی</span>
</td>
<td>@item.CATALOG_DATE</td>
<td>@item.CATALOG_DESC</td>
<td>
<button type = "button" class = "btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
<button type = "button" class = "d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
<button type = "button" class = "d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
<button type = "button" class = "btn btn-danger cat-delete-btn d-inline">حذف</button>
<input class = "d-none" id = "category_id" value = "@item.CATALOG_ID" />
</td>
</tr>
<tr>
<td>پیش نمایش</td>
<td>@item.CATALOG_TITLE</td>
<td>@item.CATALOG_CATEGORY</td>
<td>@item.CATALOG_CATEGORY</td>
<td>
<span>فارسی</span>
</td>
<td>@item.CATALOG_DATE</td>
<td>@item.CATALOG_DESC</td>
<td>
<button type = "button" class = "btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
<button type = "button" class = "d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
<button type = "button" class = "d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
<button type = "button" class = "btn btn-danger cat-delete-btn d-inline">حذف</button>
<input class = "d-none" id = "category_id" value = "@item.CATALOG_ID" />
</td>
</tr>
</tbody>
</table>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
63
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Это потому, что у вас есть неправильные селекторы для нацеливания на относительные элементы. Вам нужно перейти к ближайшему элементу строки, а затем найти в нем целевые элементы:
var $closestRow = $(this).closest('tr')
$closestRow.find(".cat-delete-btn,.cat-sub-btn,.cat-cancell-btn").toggleClass("d-inline d-none);
Вы можете использовать это и сократить свой код:
$(this).closest("td").find(".cat-delete-btn,.cat-sub-btn,.cat-cancell-btn").toggleClass("d-inline d-none");
Обратите внимание, что в каком-то из ваших .find методов у вас было $( как в .find($(".cat-sub-btn"). Нет необходимости использовать $() внутри .find()
Кроме того, логика в вашем .parent().parent().parent().find("tr") будет означать, что вы переходите к tbody, а затем ищете все tr, то есть почему это влияет на все ваши кнопки.
Демо
$(document).on('click', ".cat-edit-btn", function() {
//$(this).toggleClass("d-inline d-none");
$(this).closest("td").find(".cat-delete-btn,.cat-sub-btn,.cat-cancell-btn").toggleClass("d-inline d-none");
});.d-none{
display:none;}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class = "table table-bordered bg-info table-striped text-center" style = "direction:rtl; text-align:right !important;">
<thead style = "font-size: 16px">
<tr style = "color: white; background-color: darkcyan">
<th>#</th>
<th>پیش نمایش</th>
<th>نام کاتالوگ</th>
<th>دسته بندی</th>
<th>زبان</th>
<th>تاریخ انتشار</th>
<th>توضیحات</th>
<th colspan = "3">مدیریت</th>
</tr>
</thead>
<tbody style = "font-size: 15px">
<tr>
<td>پیش نمایش</td>
<td>TITLE</td>
<td>CATEGORY</td>
<td>_CATEGORY</td>
<td>
<span>فارسی</span>
</td>
<td>CATALOG_DATE</td>
<td>CATALOG_DESC</td>
<td>
<button type = "button" class = "btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
<button type = "button" class = "d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
<button type = "button" class = "d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
<button type = "button" class = "btn btn-danger cat-delete-btn d-inline">حذف</button>
<input class = "d-none" id = "category_id" value = "@item.CATALOG_ID" />
</td>
</tr>
<tr>
<td>پیش نمایش</td>
<td>TITLE</td>
<td>CATEGORY</td>
<td>_CATEGORY</td>
<td>
<span>فارسی</span>
</td>
<td>CATALOG_DATE</td>
<td>CATALOG_DESC</td>
<td>
<button type = "button" class = "btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
<button type = "button" class = "d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
<button type = "button" class = "d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
<button type = "button" class = "btn btn-danger cat-delete-btn d-inline">حذف</button>
<input class = "d-none" id = "category_id" value = "@item.CATALOG_ID" />
</td>
</tr>
</tbody>
</table>Ваша основная проблема заключается в использовании селекторов jquery $ в вашей команде .find, вам не нужно этого делать, т.е.
$(this).parent().find($(".cat-sub-btn").toggleClass("d-inline d-none"));
Должно быть:
$(this).parent().find(".cat-sub-btn").toggleClass("d-inline d-none");
Вы можете значительно упростить свой код jquery. Я изменил класс для вашей кнопки отмены, потому что она выглядела как опечатка .cat-cancell-btn -> .cat-cancel-btn.
Рекомендуемое решение
Приведенный ниже код немного отличается, так как предполагает, что все кнопки должны быть переключены (как это пытается сделать ваш текущий код). Вы можете использовать .closest("td"), чтобы найти ближайшую ячейку (то есть ту, которая содержит все кнопки), а затем найти все кнопки с помощью .find("btn"), прежде чем переключать класс для каждой из них, используя .toggleClass("d-none")
Демо
$(document).on('click', ".cat-edit-btn, .cat-cancel-btn", function() {
$(this).closest("td").find(".btn").toggleClass("d-none");
});.d-none {
display: none;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class = "table table-bordered bg-info table-striped text-center" style = "direction:rtl; text-align:right !important;">
<thead style = "font-size: 16px">
<tr style = "color: white; background-color: darkcyan">
<th>#</th>
<th>پیش نمایش</th>
<th>نام کاتالوگ</th>
<th>دسته بندی</th>
<th>زبان</th>
<th>تاریخ انتشار</th>
<th>توضیحات</th>
<th colspan = "3">مدیریت</th>
</tr>
</thead>
<tbody style = "font-size: 15px">
<tr>
<td>پیش نمایش</td>
<td>@item.CATALOG_TITLE</td>
<td>@item.CATALOG_CATEGORY</td>
<td>@item.CATALOG_CATEGORY</td>
<td>
<span>فارسی</span>
<span>انگلیسی</span>
</td>
<td>@item.CATALOG_DATE</td>
<td>@item.CATALOG_DESC</td>
<td>
<button type = "button" class = "btn btn-warning ml-1 cat-edit-btn d-inline">Edit</button>
<button type = "button" class = "d-none btn btn-success ml-1 cat-sub-btn ">Sub</button>
<button type = "button" class = "d-none btn btn-info ml-1 cat-cancel-btn">Cancel</button>
<button type = "button" class = "btn btn-danger cat-delete-btn d-inline">Delete</button>
<input class = "d-none" id = "category_id" value = "@item.CATALOG_ID" />
</td>
</tr>
<tr>
<td>پیش نمایش</td>
<td>@item.CATALOG_TITLE</td>
<td>@item.CATALOG_CATEGORY</td>
<td>@item.CATALOG_CATEGORY</td>
<td>
<span>فارسی</span>
<span>انگلیسی</span>
</td>
<td>@item.CATALOG_DATE</td>
<td>@item.CATALOG_DESC</td>
<td>
<button type = "button" class = "btn btn-warning ml-1 cat-edit-btn d-inline">Edit</button>
<button type = "button" class = "d-none btn btn-success ml-1 cat-sub-btn ">Sub</button>
<button type = "button" class = "d-none btn btn-info ml-1 cat-cancel-btn">Cancel</button>
<button type = "button" class = "btn btn-danger cat-delete-btn d-inline">Delete</button>
<input class = "d-none" id = "category_id" value = "@item.CATALOG_ID" />
</td>
</tr>
</tbody>
</table>Другие вопросы по теме
Как выбрать входы типа файла, которые были загружены пользователем?
Заполнение коробки цветом
Галерея изображений одного продукта FlexSlider/WooCommerce: попытка вызвать изменение избранного изображения из палитры цветов
Object%20Object предшествует изменению URL-адреса jQuery
Как остановить выборку данных в ajax, когда все данные извлекаются
XML в читаемый формат Javascript/Jquery
Значение комментариев работает ТОЛЬКО для первого сообщения
Как я могу исправить выпадающее подменю, чтобы оно не откатывалось после нажатия?
Как исправить залипание эффекта .hover
Итерировать массив> заполнить поле выбора> вернуть поле выбора из функции как html
Похожие вопросы
Как выбрать селектор nth-of-type, для которого установлено значение display:none, чтобы изменить его на display:block при нажатии кнопки?
Строка JSON игнорирует параметры на разных вкладках того же браузера
Как нажимать HTML каждые 3 раза в массив для вывода
Поиск в общей папке через iis
Развернуть массив в дерево без родительского идентификатора, но с уровнем
Как исправить эту ошибку «Uncaught DOMException: не удалось выполнить« querySelectorAll »для« документа »:« div.com [min =] »не является допустимым селектором»?
Отключить addEventListener для мобильных устройств/устройств с меньшим экраном
Csv.html: 24 Uncaught ReferenceError: [функция] не определена в HTMLButtonElement.onclick
Правильный синтаксис для передачи переменной внутри setBadgeText
Как выбрать входы типа файла, которые были загружены пользователем?
Я сделал тебе фрагмент. Пожалуйста, замените материал шаблона фактическим HTML, так как это не вопрос шаблона.