javascript - 使用 jquery 从列表中添加和删除类

Question

我有一个无序的 HTML 列表，例如：

<ul>
    <li class="current"></li>
    <li></li>
    <li></li>
</ul>

使用 jquery，我想自动从第一个 li 元素中删除当前类并将其添加到第二个类中。不久之后，我想从第二个 li 元素中删除该类并将其添加到第三个元素中。我也想重复一遍。

到目前为止我有这个，但这根本不是我需要的：

 $("ul li:first-child").addClass('current').delay(1000).queue(function(next){
    $(this).removeClass('current');
    $(this).next().addClass('current')
    next();
});

Answer 1

如果您希望能够停止和启动它：

var myInterval;
var myFunc = function() {
        var cur = $('ul li.current');
        if(cur.index() == $('ul li').length - 1) {
            cur.removeClass('current');
            $('ul li:first').addClass('current');
        } else {
            cur.removeClass('current').next().addClass('current');
        }
    };
//Start Interval
myInterval = setInterval(myFunc, 1000);

然后，停止/启动：

clearInterval(myInterval);
myInterval = setInterval(myFunc, 1000);

jsFiddle

Answer 2

var $li = $('ul li'), i = 0;

setInterval(function(){
    i++;
    if( $li.length === i ) i = 0;
    $li.removeClass('current').eq(i).addClass('current')
}, 1000);

http://jsfiddle.net/mr7J6/

Answer 3

试试这个：

var idx = 1;
setInterval(function () {
    $('ul li').removeClass('current').eq(idx).addClass('current');
    idx++;
    if (idx == $('ul li').length) idx = 0;
}, 1000);

jsFiddle 示例

Answer 4

$(function(){ 
   move();
 });


function move(){
    $("ul li.current").delay(1000).queue(function(next){
        $(this).removeClass('current');
        if($(this).next().addClass('current').length){
           move();
         } 

     });
}

Answer 5

如果您需要它环绕，您可以使用模数运算符来完成，如下所示：

$(document).ready(function() {
    var targets = $('ul li');
    var len = targets.length;
    var i = 0;
    setInterval(function() {
        // remove from current
        $('li.highlight').removeClass('highlight');
        i = (i + 1) % len;
        targets.eq(i).addClass('highlight');
    }, 1000);
});

演示

Answer 6

使用 jQuery click 事件添加和删除类无序列表当前类。**

工作示例

**

$(document).on('ready', function() {
		
      $('.list-1 li').each(function(){
			var t = $(this);
			t.find('a').click(function(){
				$('li.current').removeClass('current');
				t.addClass('current');
			});
			
		});

    });

 .list-1 li a{text-decoration:none; color:#444; background:#ddd; padding:5px 15px 10px;}
	.list-1 li.current a{background:tomato; color:#fff;}
  .list-1{display:flex; flex-wrap:wrap;min-width:140px}
   .list-1 li{padding:5px;margin:0 0 15px;display:block;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
   
    <ul class="list-inline list-1">
		<li class="current"><a href="#">Exapmle 1</a></li>
		<li><a href="#">Exapmle 2</a></li>
		<li><a href="#">Exapmle 3</a></li>
		<li><a href="#">Exapmle 4</a></li>
		<li><a href="#">Exapmle 5</a></li>
		<li><a href="#">Exapmle 6</a></li>
		<li><a href="#">Exapmle 7</a></li>
		<li><a href="#">Exapmle 8</a></li>
		<li><a href="#">Exapmle 9</a></li>
	</ul>