在带有按钮的循环中：仅在单击的按钮中切换类 on_click答案

【问题标题】：In a loop with buttons: toggle a class on_click in only the button clicked在带有按钮的循环中：仅在单击的按钮中切换类 on_click
【发布时间】：2021-10-02 21:14:54
【问题描述】：

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) 而不是单击的按钮，因为由于循环，所有按钮都是相同的，我如何使其仅针对我单击的按钮？

【问题讨论】：

你试图改变 btn 点击的颜色？
它在<form 内吗？你为什么用e.preventDefault();？也请添加a Minimal, Reproducible Example
@saurabh 在点击时更改 css
@MisterJojo 对不起，我刚刚取出其他代码只是为了突出显示 toggleClass

标签： javascript css class button onclick

【解决方案1】：

你可以使用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");
   }
 });

【讨论】：

【解决方案2】：

当您在问题中显示 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')
    }  
  })

【讨论】：