jQuery添加類到連續divs點擊

Question

當點擊另一個元素（說一個鏈接）時，是否可以添加一個類到連續div？

舉例來說，我有這個標記;

<div class="wrapper"> 

    <div class="inner-div"></div> <!-- first div --> 
    <div class="inner-div"></div> <!-- second div --> 
    <div class="inner-div"></div> <!-- third div --> 

    <a class="button clicker" href="#">Click me</a> 

</div> 

我想要做的是，當.clicker鏈接被點擊我想第一.inner-div給予一類.show。然後當.clicker被再次點擊時，第二個.inner-div被授予一類.show（每個div在每次新的點擊時保持它是新類）等等等等。

這可能嗎？

Answer 1

論.clicker點擊查找第一個.inner-div不具有.show類，並添加.show：

$(".clicker").click(function(e){ 
     e.preventDefault(); 
     $(".inner-div:not(.show)").first().addClass("show"); 
}); 

見演示：http://jsfiddle.net/mzwgg8rs/

---

$(function(){ 
 
    
 
    $(".clicker").click(function(e){ 
 
    e.preventDefault(); 
 
    $(".inner-div:not(.show)").first().addClass("show"); 
 
}); 
 
    
 
});

.inner-div 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    background:blue; 
 
} 
 

 
.inner-div.show 
 
{ 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 

 
    <div class="inner-div"></div> <!-- first div --> 
 
    <div class="inner-div"></div> <!-- second div --> 
 
    <div class="inner-div"></div> <!-- third div --> 
 

 
    <a class="button clicker" href="#">Click me</a> 
 

 
</div>