Question

我想制作 li 列表，其中jQuery将每2秒更改一次内容。像游戏新闻一样。问题仅在第一个周期。在第一个周期将跳过数组中的第二项。第二个周期和下一个周期都没关系。

这是我的代码：

＆＃13;

$(document).ready(function() {
            var pages = ["<li class='active'><a href='#'>Hello</a></li>", "<li class='active'><a href='#'>Hello2</a></li>", "<li class='active'><a href='#'>Hello3</a></li>"]
	var index = 0;
    setInterval(function() {
        $("#ul_news").empty().append(pages[index]);
        index++;
        if (index >= pages.length){
        	index = 0;
        }
        setInterval(function(){
        	$(".active").empty().append(pages[index]);
        }, 2000);
    }, 2000);

});

＆＃13;

#ul_news{
	position: absolute;
	top: 0;
	left:100px;
	z-index: 20;
}
#ul_news li{
	z-index: 20;
	color: black;
	list-style: none;
	padding-bottom: 50px;
}
.non_active{
	z-index: -1000;
}

＆＃13;

<!DOCTYPE html>
<html lang="cs-cz">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width" />
	<link rel="stylesheet" href="index.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
</head>
<body>
	<ul id="ul_news">
		<!--<li class="active">aho	j2</li>
		<li class="non_active1">ahoj3</li>
		<li class="non_active2">ahoj4</li>
		<li class="non_active3">ahoj5</li>-->
	</ul>
</body>
</html>

＆＃13;

Answer 1

我认为您将setInterval与setTimeout

混淆了

由于setInterval重复执行方法（除非它被clearInterval()停止），您不必在中嵌套另一个setInterval方法执行：

var pages = ["<li class='active'><a href='#'>Hello</a></li>", "<li class='active'><a href='#'>Hello2</a></li>", "<li class='active'><a href='#'>Hello3</a></li>"]
var index = 0;
// just a bit of caching:
var news = $("#ul_news");
setInterval(function() {
  news.html(pages[index]);
  index++;
  if (index >= pages.length){
    index = 0;
  }
}, 2000);

<!DOCTYPE html>
<html lang="cs-cz">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width" />
	<link rel="stylesheet" href="index.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
</head>
<body>
	<ul id="ul_news">
		<!--<li class="active">aho	j2</li>
		<li class="non_active1">ahoj3</li>
		<li class="non_active2">ahoj4</li>
		<li class="non_active3">ahoj5</li>-->
	</ul>
</body>
</html>

作为旁注，您不需要使用.empty().append()。您只需使用单一方法html()

即可

如何从数组中每隔x秒更改<li>的内容？

1 个答案: