所以我只是在学习和练习 Javascript 以及 javascript 库。在这个例子中，我正在使用 JQuery。这个例子只是一个简单的引用旋转器（你想怎么称呼它的转换器）。代码工作正常。我的问题是匿名函数中的 if 语句（在fadeOut 方法中）。if 语句中的参数是：currentQuote == allQuotes.length - 1为什么必须这样写而不是currentQuote >= allQuotes.length不应该使用大于或等于以完全相同的方式工作吗？如果没有，为什么不呢？整个代码如下。//HTML<body> <div class="quote-holder"> <blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </blockquote> <blockquote> Ut enim ad minim veniam, quis nostrud exercitation ullamco </blockquote> <blockquote> Duis aute irure dolor in reprehenderit in voluptate velit esse </blockquote> </div></body>//CSS.quote-holder { width: 30%;}blockquote { display: none;}blockquote:first-of-type { display: block;}//javascript jquerylet allQuotes = $("blockquote");let currentQuote = 0;function changeQuote(){ $(allQuotes[currentQuote]).fadeOut(200, function(){if(currentQuote == allQuotes.length - 1){ currentQuote = 0; }else { currentQuote++; } $(allQuotes[currentQuote]).fadeIn(200)});}let quoteTimer = setInterval(changeQuote, 3000)
1 回答
Qyouu
TA贡献1786条经验 获得超11个赞
因为只要数组位置到达末尾，循环就需要重置。否则它将始终显示第一个位置。
如果数组长度是 5. 位置是 [0],[1],[2],[3],[4] 所以4是最后一个元素，它是：
array.length - 1.
在您的问题的功能中，您需要将位置设置为0，以便您可以让引号循环不断旋转。我用评论分步解释了更多。
let allQuotes = $("blockquote");
let currentQuote = 0;
function changeQuote(){
$(allQuotes[currentQuote]).fadeOut(200, function(){
if(currentQuote == allQuotes.length - 1){ //if last position
currentQuote = 0; //reset
}else { //else
currentQuote++; // go next
}
$(allQuotes[currentQuote]).fadeIn(200)});
}
let quoteTimer = setInterval(changeQuote, 3000)
.quote-holder {
width: 30%;
}
blockquote {
display: none;
}
blockquote:first-of-type {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="quote-holder">
<blockquote>
Hello
</blockquote>
<blockquote>
How are you?
</blockquote>
<blockquote>
Good Thanks
</blockquote>
</div>
</body>
添加回答
举报
0/150
提交
取消