如何将数组中的类随机分配给for循环中创建的元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将数组中的类随机分配给for循环中创建的元素相关的知识，希望对你有一定的参考价值。
我正在使用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上重复？
答案
你的代码是错误的...因为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);
}
另一答案
由于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>以上是关于如何将数组中的类随机分配给for循环中创建的元素的主要内容，如果未能解决你的问题，请参考以下文章
为什么将值分配给数组中的特定位置，将同一值分配给同一数组中的其他随机位置？
在 for 循环中创建 CGRect 并将其分配给 UIView