使用 jQuery 一段时间后更改文本？

Question

该站点上已经有一些答案，但无法弄清楚我需要什么。

使用此处接受的答案： How can I change text after time using jQuery?

但是，我不想让它发出警报，而是让它重新加载到它的第一条消息（为了清楚起见，添加完整的代码：

 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>

在另一个答案中，我也发现了类似的东西，但我无法添加淡入和淡出：

 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>

这似乎是一个简单的答案，但是虽然我在一定程度上理解 html 和 css，但 jscript 仍然超出我的能力范围，所以一个清晰的答案会很棒。

感谢任何会回答的人。

Answer 1

在第一个示例中使用pop会主动从messages数组中删除元素 - 因此您不能“重新启动脚本”，因为您基本上已经破坏了数据。

将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>

如您所见，无需copy或复制数据 - 也无需reverse消息。

只需使用消息索引来跟踪要显示的消息并循环索引。

Answer 2

您正在使用 pop 来清空原始列表。 您需要保留原始列表才能重新开始：

 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>

Answer 3

试试看：

 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>

使用 jQuery 一段时间后更改文本？

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-12-22 09:22:58

解决方案2
0 2020-12-22 09:13:05

解决方案3
0 2020-12-22 11:01:48

使用 jQuery 一段时间后更改文本？

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-12-22 09:22:58

解决方案2 0 2020-12-22 09:13:05

解决方案3 0 2020-12-22 11:01:48

解决方案1
1 已采纳 2020-12-22 09:22:58

解决方案2
0 2020-12-22 09:13:05

解决方案3
0 2020-12-22 11:01:48