使用jQuery切换CSS类

Question

我似乎无法让这个工作。我想做的是让jQuery添加/删除（或切换）一个类，该类具有display:none属性。

jQuery

  <script type ="text/javascript">

    //Event Triggers
    $("#cbVitamins").click(function(evt){
      $("#products h2.product-type[data-type=vitamin]").parent().addClass("hideItem");
    });
  </script>

CSS

  <style>
    .hideItem {
      display:none;
    }
  </style>

HTML按钮挂接事件

      <div>
        <span>Show: </span>
        <input id="cbVitamins" type="checkbox" checked="checked"/>
        <label for="cbVitamins">Vitamins</label>
      </div>

HTML → 给 li 元素添加 .hideItem 类

<li class="product-item" data-prod_id="V-C6614">
    <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
    <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

它的预期功能：

（请注意，这是一张图片，请仔细查看）

- Vincent Tang

---

使用.toggleClass()。 - guradio

或者，如果 display:none 是它的全部功能，甚至可以使用 toggle()。 - adeneo

你的 h2.product-type 选择器与 h2 元素上的类不匹配。应该是 h2.product-name。 - nnnnnn

Answer 1

问题在于您使用jQuery目标是 product-type 类，但实际上在您的HTML中使用的是 product-name 类。

您可以使用.toggle()方法切换可见性 - 您不需要创建单独的类。

//Event Triggers
$("#cbVitamins").click(function(evt) {
  $("h2.product-name[data-type=vitamin]").parent().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <span>Show: </span>
  <input id="cbVitamins" type="checkbox" checked="checked" />
  <label for="cbVitamins">Vitamins</label>
</div>

<li class="product-item" data-prod_id="V-C6614">
  <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
  <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

希望这能帮到你！ :)

- Obsidian Age

---

非常感谢 :) 我没意识到我输入了 type 而不是 name，它也可以工作。顺便问一下，parents() 难道不会定位目标类的所有父类，直至 html 元素吗？但在这种情况下，parents() 却只针对我上一层的元素，这正是我想要的。我记得只有 parentsUntil() 才能实现这种效果，还是我混淆了 parent() 和 parents() ？ - Vincent Tang

你确定 parents() 只针对你的上一级吗？在你的示例和我的答案中，我们都使用了单数的 parent()。我刚刚再次确认，在我的答案代码中使用 parents() 确实可以切换 所有 可见元素。不要忘记 parentsUntil() 是 排除 的，并且如果需要，你总是可以 链式 使用 parent()；element.parent().parent() 是完全有效的。 - Obsidian Age

从来没有想过parent().parent()。我有很多其他的父类包含了数据（但省略了），但我阅读了jQuery文档，现在我明白了parent()和parents()之间的区别。感谢信息。 - Vincent Tang

Answer 2

您在jquery中使用了$("#products"...，但是在html代码中我看不到这个id对应的元素。

请将代码更改为以下形式：

$('#cbVitamins').click(function(){
    $('.product-item').toggleClass('hideItem');
})

注意：我更喜欢使用change事件。

$(document).ready(function(){
  $('#cbVitamins').click(function(){
    $('.product-item').toggleClass('hideItem');
  })
})

.hideItem {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div>
  <span>Show: </span>
  <input id="cbVitamins" type="checkbox" checked="checked"/>
  <label for="cbVitamins">Vitamins</label>
</div>
<li class="product-item" data-prod_id="V-C6614">
  <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
  <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

- Ehsan

---

谢谢，这很有帮助 :) - Vincent Tang

Answer 3

你可以使用 jQuery 的 hide() 和 show() 方法。

$('.clickButton').click(function() {
    $('.element').hide();
});

$('.clickButton').click(function() {
    $('.element').show();
});

希望那有所帮助。

- user2182102

---

你可以，但如果.addClass（“hideItem”）不起作用，为什么这会起作用？ - nnnnnn

toggle()函数如果没有参数，它会执行hide()和show()两个函数吗？还是有所不同？ - Vincent Tang

是的，它确实如此。 - user2182102

Answer 4

使用jquery切换类

$("#cbVitamins").on('change', function() {
  $(".product-name").toggleClass("hide");
});

.hide {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
  <span>Show: </span>
  <input id="cbVitamins" type="checkbox" checked="checked" />
  <label for="cbVitamins">Vitamins</label>
</div>

<li class="product-item" data-prod_id="V-C6614">
  <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
  <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

- kdgilang

---

当描述事件处理程序时，change事件是否仅包含比click更多的内容？ - Vincent Tang