Javascript 只为li的一个元素切换类jQuery

我试图在用户单击复选框及其文本（选中）后为其添加背景色。但在这里，它添加到了我的所有列表中，而不仅仅是李点击的列表

HTML

然后是Sass文件

.parent_category
float: right
margin: 15px
&.selected
  border: 4px solid #ffe400
  ul
      width: 100%
      padding: 0px
      li
          padding-left: 20px
          border-bottom: 1px solid #CCCCCC
          display: block
          &:last-child
              border-bottom: none

.behind
display: none

.background
background-color: #CCCCCC
width: 100%

---

因此，我试图实现的是>我希望当用户勾选一个li（整行）时，它的背景变为灰色，当用户取消勾选时，它返回到正常状态。而且，现在当我点击勾号时，我的“选定”类被切换，使我的li消失，我不想这样

我不明白，为什么要在此元素$（“label.parent\u category”）上添加click事件-您的html结构中没有这样的内容。。是打字错误吗

尝试以下变体：

$('.parent_category input:checkbox').on('change', function(){
        var $checkbox = $(this);
        $checkbox.closest('label').toggleClass('background', $checkbox.is(':checked'));
    });

而不是

$("label.parent_category").click(function(e) { $(e.currentTarget).toggleClass("background"); });

---

我不明白，为什么要在这个元素$（“label.parent\u category”）上添加click事件-你的html结构中没有这样的内容。。是打字错误吗

尝试以下变体：

$('.parent_category input:checkbox').on('change', function(){
        var $checkbox = $(this);
        $checkbox.closest('label').toggleClass('background', $checkbox.is(':checked'));
    });

而不是

$("label.parent_category").click(function(e) { $(e.currentTarget).toggleClass("background"); });

尝试替换：

$("label.parent_category").click(function(e) {

作者：

我认为您的选择器出错。

尝试替换：

$("label.parent_category").click(function(e) {

作者：

我认为您的选择器有误。

您可以使用带选择器的作为第二个参数：

$('.parent_category').on('click', 'li', function (clickEvent) {
    // ...
});

这将向DOM中添加一个单击处理程序，该处理程序对

中的每个
li
作出反应。父类_类别

您可以使用带有选择器的作为第二个参数：

$('.parent_category').on('click', 'li', function (clickEvent) {
    // ...
});

---

这将向DOM添加一个单击处理程序，该处理程序对

中的每个
li
作出反应。父类

工作正常！谢谢你，丹尼斯！你可以在上面编辑你的答案，我会把它作为正确的答案那很有效！谢谢你，丹尼斯！你可以在上面编辑你的答案，我会把它作为正确的答案虽然这在技术上可行，但应该注意，它将为

“.parent_category label”

选择器的每个结果添加一个单击处理程序。因此，如果您有100个标签，它将添加100个单击处理程序。在父元素上使用（'click'，'label'，function）时，更有效的方法是在父元素上使用

$（'.parent_category'）。在（'click'，label'，function）

时，使用选择器以子元素为目标，这将导致仅向DOM中添加一个处理程序函数。虽然这在技术上可行，但应注意，它将为

的每个结果添加一个click处理程序“.parent_category label”

选择器。因此，如果您有100个标签，它将添加100个单击处理程序。更有效的方法是使用

$（'.parent_category'）。在父元素上（'click'，'label'，function）

，使用选择器以子元素为目标，这将导致仅向DOM添加1个处理程序函数。