簡體   English   中英

使用jQuery父選擇器切換addclass

[英]Toggle addclass with jquery parent selector

我在網格中有一些產品。 我希望當我單擊項目中的每個圖標時,它將切換類“ .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> 

您需要刪除以下行:

$('.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> 

首先,在任何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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM