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

Question

我正在使用 for 循环创建许多 div，分配一个 class 名称，并附加到父 div。我遇到的困难是另外包括更多 classes——随机地——来自一个数组。下面是一个片段。

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' 的 class 创建子 divs 并且随机 class 也被包括在内，但我正在在所有 div 上都是相同的随机 class。

我希望它看起来像这样

<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>
  ...

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

Answer 1

因为randomClass是在循环外创建的，它在循环的每次迭代中都有相同的值。

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

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>

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

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

How to assign classes in an array randomly to an element created in for loop

javascript

arrays

for-loop

classname

createelement

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

How to assign classes in an array randomly to an element created in for loop

javascript

arrays

for-loop

classname

createelement

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