javascript - ToggleClass jQuery仅适用于li的一个元素

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

的HTML

<li class="parent_category">
  <ul>
      <li class="behind">
              <label>
                  <input type="checkbox">
                  Text3 Text Text
              </label>
       </li>
       <li class="behind">
              <label>
                  <input type="checkbox">
                  Text2 Text Text
              </label>
       </li>
       <li class="behind">
              <label>
                  <input type="checkbox">
                  Text1 Text Text
              </label>
       </li>
       <li class="behind">
              <label>
                  <input type="checkbox">
                  Text4 Text Text
              </label>
       </li>
  </ul>
</li>

jQuery的

define([], function(){
  var main = function(data, options) {

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

        $(this).toggleClass("selected");
      });

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

        $(e.currentTarget).toggleClass("background");
      });
    });
    console.log("Select Recommended loaded");
  }
  return main;
});

然后是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_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"); });