Question

我的代码： http://codepen.io/vincentccw/pen/jquJs

<ul id="menuDots">
    <li id="about1"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
    <li id="about2"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
    <li id="about3"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
</ul>

<div class="btn">next btn</div>

现在我已经设置了按钮

$('.btn').click(function(){
    $('#menuDots li a img.bulletRoll').css({"display":"none"});
});

问题是我有3组按钮，但是在不同的层次结构中，

第一个按钮 - $('#menuDots li a img.bulletRoll')，在li的第一个孩子里面

第二个按钮 - $('#menuDots li a img.bulletRoll')，在李的第二个孩子里面

第三个按钮 - $('#menuDots li a img.bulletRoll')，在li的第三个孩子里面

如何仅将display:none设置为仅第一个.bulletRoll，然后第二次点击会将显示无设置为下一个.bulletRoll？我尝试使用next()，但似乎无法正常工作？

Answer 1

您可以选择仍然可见的.bulletRoll元素中的第一个：

$('.btn').click(function(){
    $('#menuDots li a img.bulletRoll').filter(':visible').first().css({"display":"none"});
});

演示：http://codepen.io/anon/pen/nqJaI

此外，您可以使用.hide()代替.css({"display":"none"})。

另外我也不建议使用div元素作为“按钮”，因为用户无法通过键盘访问它，因此无法（或者只是选择不）的人无法访问您的页面使用鼠标或其他指针设备。改为使用锚元素或按钮。

Jquery选择1个接一个类？

1 个答案: