在一个带有按钮的循环中：只在单击的按钮上单击鼠标切换类

1zmg4dgp 于 2021-09-29 发布在 Java

关注(0)|答案(2)|浏览(514)

css:

.btn-category-list-col {
    background:#f4f6f9;
    border: 0 !important;
}
.btn-category-list-col:hover {
    background: #E2EEFC;
}
.btn-category-list-col button:hover {
    font-weight: bold;
}
.btn-category-list-col-click {
    background: #E2EEFC;
}
.btn-category-list-col-click button {
    font-weight: bold;
}

循环按钮：

<td class="p-0 btn-category-list-col">
    <button type="button" value="${cat.category_id}" class="category_sort btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>

剧本

$(document).on('click', '.category_sort', function (e) {
        e.preventDefault();
            $(".btn-category-list-col").toggleClass("btn-category-list-col-click");
        });

正如您所看到的，我的onclick函数更改了所有类（.toggleclass），而不是单击的按钮，因为由于循环，所有按钮都是相同的，我如何使它专门针对我单击的按钮？

JavaScript Class css Button OnClick

来源：https://stackoverflow.com/questions/68538213/in-a-loop-with-buttons-toggle-a-class-on-click-in-only-the-button-clicked

2条答案

按热度按时间

x33g5p2x1#

您可以使用jquery的属性选择器以特定按钮为目标，而不是选择类。
假设 cat.category_id 是独一无二的

<!-- add data-id attribute to it-->
<td class="p-0 btn-category-list-col">
    <button type="button" value="${cat.category_id}" data-id="${cat.category_id}" class="category_sort btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>

$(document).on('click', '.category_sort', function (e) {
   e.preventDefault();
   let id = event.target.dataset.id;
   if (id) {
     $(`button[data-id=${id}]`).toggleClass("btn-category-list-col-click");
   }
 });

赞(0）回复(0）举报 2021-09-29

vc9ivgsu2#

我很难理解，当您在问题中呈现jquery代码时，为什么要询问javascript答案。所以，这是你的解决方案

document
  .querySelectorAll('.category_sort')
  .forEach(bt=>
  {
  bt.onclick = e =>
    {
    e.preventDefault()
    bt.closest('.btn-category-list-col').classList.toggle('btn-category-list-col-click')
    }  
  })

赞(0）回复(0）举报 2021-09-29

我来回答

在一个带有按钮的循环中：只在单击的按钮上单击鼠标切换类

2条答案

相关问题

热门标签

最新问答