javascript - 如何将数组中的类随机分配给 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);
}

我能够创建具有“速度”类的子 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);
}