JavaScript定时随机切换文本仅单元素生效问题求助

你的代码存在以下几个导致功能异常的问题：

• 重复引入2个不同版本的jQuery，会引发库冲突，仅保留1个高版本即可
• HTML属性写法错误：<div="container">为无效语法，正确写法是<div class="container">
• 选择器使用错误：jQuery中id选择器格式为$('#id名')，你写的$('.fruit')是匹配class为fruit的元素，无法命中目标；且现有逻辑仅处理了水果类单个元素，未覆盖其他需要切换文本的节点
• 原生JS方法拼写错误：不存在document.getElementByID方法，正确写法为document.getElementById，且该行代码仅读取元素内容、无任何实际操作，属于无效冗余代码
• 词库缺失：仅定义了水果类的文本数组，没有定义动物类文本的可选值，动物类元素无内容可切换
• 随机数逻辑有缺陷：使用Math.round计算随机索引会导致数组首尾元素被选中的概率远低于中间元素，随机公平性不足

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 仅保留单个版本jQuery，移除重复的低版本引入 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <!-- 修正container的class属性写法 -->
  <div class="container">
    <div>
      <!-- 同类型元素加统一class，方便批量处理 -->
      <p class="Text fruit-group">Grape</p>
    </div>
    <div>
      <p class="Text animal-group">Shark</p>
    </div>
  </div>

  <div class="container">
    <div>
      <p class="Text fruit-group">Strawberry</p>
    </div>
    <div>
      <p class="Text animal-group">Unicorn</p>
    </div>
  </div>

  <script>
    // 分别定义两类文本的可选词库
    const fruitList = ["Apple", "Banana", "Cherry", "Dragonfruit", "Elderberry", "Guava", "Jackfruit", "Longan", "Mango", "Orange", "Pineapple", "Watermelon"];
    const animalList = ["Shark", "Unicorn", "Tiger", "Rabbit", "Elephant", "Panda", "Giraffe", "Dolphin", "Eagle", "Cat", "Dog", "Penguin"];

    // 每5秒执行一次文本切换
    setInterval(function() {
      // 遍历所有水果类元素，逐个生成随机文本
      $('.fruit-group').each(function() {
        const randomIndex = Math.floor(Math.random() * fruitList.length);
        $(this).text(fruitList[randomIndex]);
      });

      // 遍历所有动物类元素，逐个生成随机文本
      $('.animal-group').each(function() {
        const randomIndex = Math.floor(Math.random() * animalList.length);
        $(this).text(animalList[randomIndex]);
      });
    }, 5000);
  </script>
</body>
</html>

• 给同类型文本元素绑定统一class，不需要逐个通过id绑定逻辑，后续新增同类型元素时只要加上对应class就会自动纳入切换逻辑，扩展性更强
• 通过jQuery的each方法遍历所有匹配元素，每个元素单独生成随机索引，避免所有元素同时切换为完全相同的文本
• 用Math.floor替代Math.round计算随机索引，保证词库内每个文本被选中的概率一致
• 移除了无效的冗余代码，避免控制台报错影响功能运行

内容的提问来源于stack exchange，提问作者Tria Astuti