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

Question

我正在使用for循环来创建许多div，分配一个类名，并附加到父div。我遇到的困难还包括从数组中随机包含更多类。下面是一个片段。

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);
}

我能够使用'speed'类创建子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上重复？

Answer 1

你的代码是错误的...因为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);
}

Answer 2

由于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>