使用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→将.hideItem类添加到li元素

<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>

应该做什么：

Answer 1

问题是当您在HTML中实际使用类product-type时，您正在使用jQuery定位类product-name。

您可以使用.toggle() method切换可见性 - 您无需创建单独的类：

//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>

希望这有帮助！ ：）

Answer 2

您可以使用jquery hide（）和show（）方法。

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

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

希望有所帮助。

Answer 3

使用jquery

切换类

＆＃13;

＆＃13;

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

＆＃13;

.hide {display: none;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

  

您在jquery.i中使用$("#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>