如何让JavaScript shuffle随机文字函数在所有HTML标签生效

• HTML标准中id属性为页面唯一标识符，你在两个

  标签上重复使用id="word"，无论原生JS的getElementById还是jQuery的#word选择器，都只会匹配到页面中第一个带该id的元素，第二个元素无法被选中

• 页面重复引入了两个不同版本的jQuery，可能导致全局$对象冲突，脚本运行异常
• 原有JS逻辑仅针对单个元素做定时器绑定，没有遍历所有需要实现轮换效果的元素做批量处理，自然无法支持多标签同时运行
• 原有随机数逻辑用Math.round计算索引，会导致词库首尾单词的选中概率只有其他单词的一半，随机分布不均匀
• 代码末尾document.getElementById("word").innerHTML;为无意义冗余语句，没有实际作用

CSS #

把原来绑定id的样式改为绑定可复用的类，支持多元素共用样式：

.text-shuffle {
  align-content: center;
  display: block;
}

HTML #

移除重复id、删除重复引入的低版本jQuery，给所有需要轮换效果的标签加上统一的复用类：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./word.js"></script>
</head>
<body>
  <div>
    <p class="text text-shuffle">Franco</p>
  </div>
  <div>
    <p class="text text-shuffle">Henry</p>
  </div>
  <!-- 后续如果要加更多轮换标签，只要给标签加上text-shuffle类即可自动生效 -->
</body>

JS #

遍历所有轮换类标签，给每个标签绑定独立定时器，实现互不干扰的随机轮换：

// 随机轮换词库
const words = ["Andre", "Anne", "Billy", "Clark", "David", "Edward", "Gee", "Jasper", "Kelvin", "Steven", "Tom", "Willy"];

// 页面DOM加载完成后执行绑定
$(function() {
  $('.text-shuffle').each(function() {
    const $el = $(this);
    // 每个元素独立运行定时器，互不影响
    setInterval(() => {
      let randomIdx;
      // 过滤掉和当前显示内容相同的词，避免无意义刷新
      do {
        randomIdx = Math.floor(Math.random() * words.length);
      } while (words[randomIdx] === $el.text().trim())
      $el.text(words[randomIdx]);
    }, 5000);
  })
})

• 完全符合HTML规范，不存在重复id问题，后续要加更多轮换标签，只需要给对应标签加text-shuffle类就能自动生效，不需要改JS代码
• 移除了重复的jQuery引入和冗余代码，避免版本冲突和无效执行
• 每个元素的定时器独立运行，轮换节奏互不干扰
• 新增重复词过滤逻辑，不会出现连续两次显示同一个词的情况，体验更流畅
• 修正随机数计算逻辑，保证词库中每个词被选中的概率均等

内容的提问来源于stack exchange，提问作者Sosbobet Forum