使用jQuery父选择器切换addclass

Question

我在网格中有一些产品。 我希望当我单击项目中的每个图标时，它将切换类“ .active”，并且如果其他项目中的其他项目可见，也将其删除。

到目前为止，这是我的脚本，可以添加从其他项目中删除的类，但是当我单击相同的图标时，它不会切换（删除类）。

 $('.items #show-actions').on('click', function(event) { event.preventDefault(); var $this = $(this).parent().parent('.items'); var $that = $(this).closest('.items'); $('.items').find('.actions').not($this).removeClass('active'); $that.find('.actions').toggleClass('active'); }); 

 <ul class="products-grid row"> <li class="items"> <a href="somelink" class="product-image"><img src="/images/myimage.png" "/></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> <li class="items"> <a href="somelink" class="product-image"><img src="/images/myimage.png" "/></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> </ul> 

Answer 1

您需要删除以下行：

$('.items').find('.actions').not($this).removeClass('active');

因为在函数中，您首先要remove该类，然后再对其进行toggle 。 在这种情况下，如果元素已经具有active类，则将其首先删除，然后再次toggle将其添加（看起来该元素仍然具有active类，因为操作非常快）。 我已经如上所述删除了该行，并添加了一些样式以查看差异，因此这是有效的代码段（单击“显示操作”以查看差异）：

 $('.items #show-actions').on('click', function(event) { event.preventDefault(); var $this = $(this).parent().parent('.items'); var $that = $(this).closest('.items'); $that.find('.actions').toggleClass('active'); }); 

 .items #show-actions { width: 100vw; background-color: royalblue; color: white; } .active { background-color: red; } img { width: 50px; height: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="products-grid row"> <li class="items"> <a href="somelink" class="product-image"><img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" /></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> <li class="items"> <a href="somelink" class="product-image"><img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" /></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> </ul> 

Answer 2

首先，在任何HTML页面上都不能有重复的ID。 我建议您将＃show-actions更改为而不是ID的类。

其次，您的img元素中也有一些额外的引号。

一旦完成，就非常简单。

 $('.show-actions').on('click', function() { var items = $('.items'); items.removeClass('active'); $(this).parent().parent('.items').addClass('active'); }); 

 .active { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="products-grid row"> <li class="items"> <a class="product-image"><img src="/images/myimage.png"/></a> <div class="product-info"> <span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> <li class="items"> <a class="product-image"><img src="/images/myimage.png"/></a> <div class="product-info"> <span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> </ul>