使用 jquery 每隔几秒突出显示列表中的不同单词

Question

我有一个格式为“xxx - yyy - zzz”的单词列表，因此“ - ”是分隔符。我希望做的只是每隔几秒随机增加一个单词的大小，以突出显示该单词。

我的方法是将列表包装在 div 中：

<div id="highlight-list">XXX - YYY - ZZZ</a>

然后使用类似的东西（尚未测试！）：

var fullList = document.querySelector("#highlight-list");
var regex = // *- *//;
var eachItem = fullList.innerHTML.split(regex);
fullList.innerHTML = "";
for(var word in eachItem){
  fullList.innerHTML += "<span>" + eachItem[word] + "</span>";
}

用跨度将 Div 中的单个单词包裹起来。我的宏伟计划是然后将 CSS 类随机应用于每个跨度几秒钟，然后删除该类，然后重复......但我在第一步中遇到了困难！

任何帮助将不胜感激，谢谢。

Answer 1

您的代码非常适合简单的文本分割（在 HTML 上分割是另一回事）。单词可以分割成一个简单的字符串：

var words = fullList.innerHTML.split(" - ");

每隔几秒突出显示一个随机单词：

• 使用

  setInterval()

  设置重复间隔
• 使用

  Math.random()

  获取随机数
• 添加/删除一个类以突出显示每个单词

更新片段：

var fullList = document.querySelector("#highlight-list");
var words = fullList.innerHTML.split(" - ");
fullList.innerHTML = "";
for (var wordIdx in words) {
  fullList.innerHTML += "<span>" + words[wordIdx] + "</span>";
}

setInterval(() => {
   let spans = $("#highlight-list > span");
   spans.removeClass("highlight");
   
   let index = Math.floor(Math.random() * spans.length);
   console.log(index, spans.length);
   spans.eq(index).addClass("highlight");
   
}, 1500);

#highlight-list > span { border:1px solid rebeccapurple; }
.highlight { color: white; background-color: rebeccapurple; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="highlight-list">XXX - YYY - ZZZ</div>

我使用 jquery 只是为了方便起见，正如您在问题中标记的那样。您通常不应该像这样混合 vanilla-js / jquery，但我不想对您的原始内容进行太多更改。

---

一些注意事项：

• 将 1500 更改为您想要的任何间隔（以毫秒为单位） - 对于演示/测试，更容易保持较低的值
• 由于只有 3 个单词，random() 调用每次有三分之一的机会获得相同的单词（相当高）。您可以存储现有的跨度，如果相同，则获取不同的索引
• console.log 只是显示它何时选择相同的数字两次
• 还有其他方法来生成 HTML，例如，如果您想保留

  .map

  分隔符

  ，则使用 

  .join(" - ")

   然后使用 

  -