单击将类逐个添加到所有元素
单击将类逐个添加到所有元素
提问于 2016-03-06 18:18:38
我只想在每次单击时将类从第一个元素移动到最后一个元素。在我的第一个单击中，它将类添加到第一个<li>，在第二个单击时，它将类移动到第二个<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
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-03-06 18:21:46
您可以像使用eq()方法一样执行以下操作。首先将index设置为0并获取li的总数，然后单击按钮，从所有li中删除current类，并将current类设置为li at index。在此之后，通过1增加索引。要在到达最后一个li后返回第一个(index+1) % total，请使用(index+1) % total。
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>
Stack Overflow用户
发布于 2016-03-06 18:27:46
另一种没有索引的方法。
$("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>
Stack Overflow用户
发布于 2016-03-06 19:31:34
首先，查找next li和类“”，并删除当前li的类。然后检查长度是否大于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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35830645
复制相关文章
相似问题
腾讯云开发者
