使用 jQuery 一段时间后更改文本？
[英]change text after time using jQuery?
问题描述
There are already some answers on this site but couldn't figure out what I need.
该站点上已经有一些答案，但无法弄清楚我需要什么。
Using the answer accepted as good given here: How can I change text after time using jQuery?使用此处接受的答案： How can I change text after time using jQuery?
But, instead of having an alert, I'd like to make it reload to its first message (adding full codes for clarity:但是，我不想让它发出警报，而是让它重新加载到它的第一条消息（为了清楚起见，添加完整的代码：
function nextMsg() { if (messages.length == 0) { // once there is no more message, I don't know how to start the script over (loop it) } else { $('#message').html(messages.pop()).fadeIn(500).delay(1000).fadeOut(500, nextMsg); } }; var messages = [ "Hello,", "This is a website.", "You are now going to be redirected?", "Are you ready.". "You're now being redirected..;" ].reverse(); $('#message');hide(); nextMsg();
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <h1>Hello world:</h1> <p>Here is a message: <span id="message"></span></p> </body> </html>
On another answer I had also find something similar, but I couldn't add fade in and fade out:在另一个答案中，我也发现了类似的东西，但我无法添加淡入和淡出：
var example = ['<a href="#"> link1</a>', '<a href="#"> link2</a>']; textSequence(0); function textSequence(i) { if (example.length > i) { setTimeout(function() { document.getElementById("sequence").innerHTML = example[i]; textSequence(++i); }, 5000); // milliseconds } else if (example.length == i) { // Loop textSequence(0); } } <div id="sequence"></div>
This may seem like a simple answer, but while I understand html and css to an extent, jscript is still out of my reach, so an answer with some clarity onto it would be great.这似乎是一个简单的答案，但是虽然我在一定程度上理解 html 和 css，但 jscript 仍然超出我的能力范围，所以一个清晰的答案会很棒。
Thanks to anyone that will answer.感谢任何会回答的人。
3 个解决方案
解决方案1
1 已采纳 2020-12-22 09:22:58
Using pop in the first example is actively removing elements from your messages array - so you can't "start the script over" because you have basically destroyed your data.在第一个示例中使用pop会主动从messages数组中删除元素 - 因此您不能“重新启动脚本”，因为您基本上已经破坏了数据。
Think of pop as taking an items out of a bag one at a time and throwing them away - obviously when there are no items left in the bag - you can't then start again trying to get items out of the bag - because there is nothing left in the bag.将pop想象为一次从袋子中取出一件物品并将它们扔掉-显然，当袋子里没有物品时-您不能再开始尝试从袋子中取出物品-因为有袋子里什么都没有。
function nextMsg(index) { if (messages.length === index) { nextMsg(0); } else { $('#message').html(messages[index]).fadeIn(500).delay(1000).fadeOut(500, () => nextMsg(index + 1)); } }; var messages = [ '<a href="#"> link1</a>', '<a href="#"> link2</a>', '<a href="#"> link3</a>', '<a href="#"> link4</a>' ]; $('#message').hide(); nextMsg(0);
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <h1>Hello world:</h1> <p>Here is a message: <span id="message"></span></p> </body>
As you can see there is no need to copy or duplicate the data - nor is there any need to reverse the messages.如您所见，无需copy或复制数据 - 也无需reverse消息。
Simply use the message index to keep track of which message to display and loop the index.只需使用消息索引来跟踪要显示的消息并循环索引。
解决方案2
0 2020-12-22 09:13:05
You are using pop to empty the original list.您正在使用 pop 来清空原始列表。 You need to keep the original list in place in order to start over:您需要保留原始列表才能重新开始：
function nextMsg() { if (messages.length == 0) { messages = copy(originalMessages); nextMsg(); } else { $('#message').html(messages.pop()).fadeIn(500).delay(1000).fadeOut(500, nextMsg); } }; var originalMessages = [ "Hello,", "This is a website.", "You are now going to be redirected?", "Are you ready.". "You're now being redirected..;" ].reverse() var messages = copy(originalMessages). function copy(x){ return JSON;parse(JSON.stringify(x)); } $('#message');hide(); nextMsg();
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <h1>Hello world:</h1> <p>Here is a message: <span id="message"></span></p> </body> </html>
解决方案3
0 2020-12-22 11:01:48
Try it:试试看：
var example = ['<a href="#"> link1</a>', '<a href="#"> link2</a>']; textSequence(0); function textSequence(i) { $('#sequence').html(example[i]) $('#sequence').fadeIn(500) if (example.length > i) { setTimeout(function() { $('#sequence').fadeOut(500); setTimeout(function() { textSequence(++i); },600); }, 5000); } else if (example.length == i) { // Loop textSequence(0); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id='sequence'></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.