在所有元素上點擊添加類

Question

我只想在每次點擊時從第一個元素到最後一個元素移動類。在我第一次點擊時，它會將該類添加到第一個<li>，然後再次點擊它將該類移動到第二個<li>並從第一個類中移除該類，等等。

<script> 
    $(function() { 
     $('button').on('click', changeClass); 

     function changeClass() { 
      var ind = $(this).index(); 
      var i = 0; 
      $("li").eq(i).addClass("current").siblings().removeClass("current"); 
     } 
    }); 
</script> 

http://codepen.io/anon/pen/QNyWQL

Answer 1

你可以像使用eq()方法如下。首先設置index到0並獲得li總數和按鈕的點擊所有li刪除current類並將current類的li在index。之後，通過1增加指數。在到達上次使用(index+1) % total後取回第一個li。

var index = 0; 
 
var total = $("li").length; 
 

 
$("button").click(function() { 
 
    $("li").removeClass("current"); 
 
    $("li").eq(index).addClass("current"); 
 
    index = (index+1) % total; 
 
});

.current{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>one</li> 
 
    <li>one</li> 
 
    <li>one</li> 
 
    <li>one</li> 
 
    <li>one</li> 
 
</ul> 
 

 
<button>click</button>

Answer 2

沒有索引的另一種方法。

$("button").click(function(){ 
 
    var el = $('li.current'); 
 

 
    if(el.length == 0){ 
 
    $('ul').find('li').eq(0).addClass('current');//if no current exist 
 
    return; 
 
    } 
 
    $('li.current').removeClass('current'); 
 
    if(typeof el.next() !== 'undefined'){ 
 
     el.next().addClass('current'); 
 
    } 
 
})

.current{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>one</li> <!-- initialize with atleast one class current --> 
 
    <li>one</li> 
 
    <li>one</li> 
 
    <li>one</li> 
 
    <li>one</li> 
 
</ul> 
 

 
<button>click</button>

所有的

Answer 3

首先找到下一個李帶班「當前」以及刪除類電流I的。然後檢查長度是否大於0表示元素存在，否則不存在。

$('button').on('click', function() { 
    var next = $('#main').find('li.current').removeClass('current').next('li'); 
    if(next.length) { next.addClass('current'); } 
    else { $('#main').find('li').first().addClass('current'); } 
}); 

<ul id="main"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

https://jsfiddle.net/sbLhewgh/