我在网格中有一些项目产品。 我希望当我单击项目中的每个图标时,它将切换类“.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');
因为在您的函数中,您首先删除
该类,然后切换
它。在这种情况下,如果该元素已经具有 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>
关于javascript - 使用 jquery 父选择器切换 addclass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48332471/