Question

我是Javascript和编程的新手。

我有20个div元素，它们共享相同的类名。我正在从40个类名的列表数组中随机地向这20个div应用一个新类。

如何将UNIQUE类名应用于我的div？

HTML：

<div class="container">
    <div class="container__grid">
      <div id="square1" class="box0"></div>
      <div id="square2" class="box0"></div>
      <div id="square3" class="box0"></div>
      <div id="square4" class="box0"></div>
      <div id="square5" class="box0"></div>
      <div id="square6" class="box0"></div>
      <div id="square7" class="box0"></div>
      <div id="square8" class="box0"></div>
      <div id="square9" class="box0"></div>
      <div id="square10" class="box0"></div>
      <div id="square11" class="box0"></div>
      <div id="square12" class="box0"></div>
      <div id="square13" class="box0"></div>
      <div id="square14" class="box0"></div>
      <div id="square15" class="box0"></div>
      <div id="square16" class="box0"></div>
      <div id="square17" class="box0"></div>
      <div id="square18" class="box0"></div>
      <div id="square19" class="box0"></div>
      <div id="square20"class="box0"></div>
    </div>
  </div>
</div>

到目前为止，我使用我的类名设置了一个数组：

var arrayClass = ["box1","box2","box3","box4","box5",
                  "box6","box7","box8","box9","box10",
                  "box11","box12","box13","box14","box15",
                  "box16","box17","box18","box19","box20",
                  "box21","box22","box23","box24","box25",
                  "box26","box27","box28","box29","box30",
                  "box31","box32","box33","box34","box35",
                  "box36","box37","box38","box39","box40"];

然后我设法列出了20个随机arrayClass：

var randomClassList = [];
for (var index = 0; index < 20; index++) {
  randomClassList.push(arrayClass[Math.floor(Math.random() * arrayClass.length)]);

并将其推送到我的HTML：

square1.className = randomClassList[0]
square2.className = randomClassList[1]
square3.className = randomClassList[2]
square4.className = randomClassList[3]
square5.className = randomClassList[4]
square6.className = randomClassList[5]
square7.className = randomClassList[6]
square8.className = randomClassList[7]
square9.className = randomClassList[8]
square10.className = randomClassList[9]
square11.className = randomClassList[10]
square12.className = randomClassList[11]
square13.className = randomClassList[12]
square14.className = randomClassList[13]
square15.className = randomClassList[14]
square16.className = randomClassList[15]
square17.className = randomClassList[16]
square18.className = randomClassList[17]
square19.className = randomClassList[18]
square20.className = randomClassList[19]

Answer 1

const classes = [...Array(40)].map((_, i) => `box${i + 1}`) // generate a new array of length 40 whose elements are `box(index+1)`
const squares = document.querySelectorAll('.box0') // pick all the elements which have the default 'box0' class


squares.forEach(square => { // iterate over the squares array
    const randomClassIndex = Math.floor(Math.random() * classes.length) // pick a random index in the classes array
    square.classList.replace('box0', classes[randomClassIndex]) // add the chosen random class to the square's classList

    classes.splice(randomClassIndex, 1) // remove the chosen class from the array
})

Answer 2

选择后，只需从阵列中删除该元素：

const randomClassList = [];
for (var index = 0; index < 20; index++) {
  const randomIndex = Math.floor(Math.random() * arrayClass.length);
  randomClassList.push(arrayClass[randomIndex]);
  arrayClass.splice(randomIndex, 1);
}

或者，更好的是，没有for循环：

const randomClassList = Array.from({ length: 20}, () => {
  const randomIndex = Math.floor(Math.random() * arrayClass.length);
  randomClassList.push(arrayClass[randomIndex]);
  arrayClass.splice(randomIndex, 1);
});

Answer 3

var randomClassList = [];

while(randomClassList.length < 20){
    var randomnumber = Math.floor(Math.random()*40) + 1;
    if(randomClassList.indexOf(randomnumber) > -1) continue;
    // randomClassList[randomClassList.length] = 'box' + randomnumber;
    randomClassList.push('box' + randomnumber);
}

将类名更改为新的随机类名

3 个答案: