如何将数组中的类随机分配给for循环中创建的元素

Posted 2023-03-16

【中文标题】如何将数组中的类随机分配给for循环中创建的元素

【英文标题】：How to assign classes in an array randomly to an element created in for loop

【发布时间】：2019-02-25 11:40:11

【问题描述】：

我正在使用 for 循环来创建许多 div、分配类名并附加到父 div。我遇到的困难是另外包括更多的类——随机的——来自一个数组。下面是一个sn-p。

let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];
let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)];

for (i = 0; i < 100; i++) 
  const test = document.createElement('div');
  test.className = 'speed ' + randomClass;
  document.getElementById('div-parent').appendChild(test);

我能够创建具有“速度”类的子 div，并且还包括一个随机类，但我在所有 div 上都获得了相同的随机类。

我希望它看起来像这样

<div id="div-parent">
  <div class="speed fast"></div>
  <div class="speed slow"></div>
  <div class="speed medium"></div>
  ...

但结果是这样的

<div id="div-parent">
  <div class="speed fast"></div>
  <div class="speed fast"></div>
  <div class="speed fast"></div>
  ...

是否可以从数组中随机选择一个类而不在所有子 div 上重复？

【问题讨论】：

在循环内移动随机语句

Voting to close as 这个问题是由无法再重现的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。这通常可以通过在发布之前确定并仔细检查重现问题所需的最短程序来避免。

【参考方案1】：

randomClass 是在循环之外创建的，它在循环的每个迭代中具有相同的值。

在循环内声明randomClass，这样它就可以在每次迭代中获取新生成的随机类：

let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];

for (let i = 0; i < 3; i++) 
  let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)];
  const test = document.createElement('div');
  test.className = 'speed ' + randomClass;
  document.getElementById('div-parent').appendChild(test);


console.log(document.getElementById('div-parent').innerhtml)

<div id="div-parent"></div>

【讨论】：

真的值得回答吗？

【参考方案2】：

您的代码错误... 因为let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)]; 存在于外部循环中。

移动内循环~

let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];


for (i = 0; i < 100; i++) 
  const randomIndex = Math.floor(Math.random() * classesArray.length));
  const randomClass = classesArray[randomIndex];

  const test = document.createElement('div');
  test.className = 'speed ' + randomClass;
  document.getElementById('div-parent').appendChild(test);