Question

我试图在用户点击它（检查它）后为复选框及其文本添加背景颜色。在这里，它在我的所有列表中添加了不仅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%

所以我想要实现的是＆gt;我希望一个li（整行）的背景在用户勾选时变为灰色，并在用户取消它时返回其正常状态。此外，现在，当我点击勾选时，我的“选定”课程被切换，让我的李消失，我不想要那个！

Answer 1

我没有得到，为什么你在这个元素上添加点击事件$（＆＃34; label.parent_category＆＃34;） - 你的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"); });

Answer 2

尝试替换：

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

通过：

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

我认为你选择了一个错误。

Answer 3

您可以将.on function与选择器一起用作第二个参数：

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

这将为DOM添加1个点击处理程序，以响应li中的每个.parent_category。

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

3 个答案: