Jquery一个接一个地选择1个班级？答案

【问题标题】：Jquery select 1 class after another?Jquery一个接一个地选择1个班级？
【发布时间】：2013-08-05 05:12:57
【问题描述】：

我的代码： 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')，在 li 的第二个子元素中

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

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

【问题讨论】：

标签： jquery select click next

【解决方案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 元素用作“按钮”，因为用户无法通过键盘访问它，因此无法访问（或只是选择不访问）的人无法访问您的页面使用鼠标或其他指点设备。请改用锚元素或按钮。

【讨论】：