jquery選擇1個類繼續？

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套的按鈕，但在不同的層次，

1st button - $('#menuDots li a img.bulletRoll')，li的第一個孩子裏面

第二個按鈕 - $('#menuDots li a img.bulletRoll')，李的第二個孩子裏面

第三按鈕 - $('#menuDots li a img.bulletRoll')，李的第三個孩子裏面

如何設置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元素作爲「按鈕」，因爲用戶無法通過鍵盤訪問它，因此您的頁面無法訪問（或者僅僅選擇不）使用鼠標或其他指針設備。改爲使用錨點元素或按鈕。