复选框标签上的jQuery toggleClass（）不会产生所需的结果

Question

我不能为我的生活弄清楚为什么这个.toggleClass（）方法不起作用。

我一直都在使用它，所以我很困惑......

我已将代码条带化为基本要素并构建this fiddle.

告诉我，我不是疯了吗？

HTML

<ul class="ingredient-list">

    <li>
      <label for="ingredient01" class="toggle">
        <input type="checkbox" id="ingredient01" />
        <span class="item-amount">1</span>
        toggle class example
      </label>
    </li>

    <li>
      <label for="ingredient02" class="add">
        <input type="checkbox" id="ingredient02" />
        <span class="item-amount">2</span>
        add class example
      </label>
    </li>

</ul>

CSS

.ingredient-list {

    list-style: none;
    margin: 1rem 0 2rem;
    padding: 0;
    li {
      margin-bottom: 1rem;
      border: 1px solid blue;
      float: left;
      padding: .5em;
    }
    label {
      display: block;
      cursor: pointer;
      border: 1px solid red;
      float: left;
      padding: .5em;
    }
    .item-amount {
      display: inline-block;
      padding: .5rem 1rem;
      background-color: orange;
      color: white;
      font-weight: 400;
      border-radius: 6px;
    }
    .ingredient-aquired {
      background-color: green;
    }

} // .ingredient-list

的jQuery

// when the user clicks or taps the ingredient,
//    toggle the color of the item amount

$('.toggle').on('click', function() {
    $(this).closest('li').find('.item-amount').toggleClass('ingredient-aquired');
});

$('.add').on('click', function() {
    $(this).closest('li').find('.item-amount').addClass('ingredient-aquired');
});

Answer 1

你应该使用

$('.toggle').on('change', function() {
    $(this).closest('li').find('.item-amount').toggleClass('ingredient-aquired');
});
$('.add').on('change', function() {
    $(this).closest('li').find('.item-amount').addClass('ingredient-aquired');
});

Demo

问题在于，如果您点击了<label>，就会检测到<input>和<label>的点击，因此课程切换了两次。

然后，最好听一下change事件。