Question

我试图将一些CSS规则随机设置给不同的部分标签，但我不知道最终会有多少个部分标签。如果有10个节标记，则每个节应在section0至section9之间具有随机的类名。需要将其随机化，而不是按顺序排列。

我了解了document.getElementByTagName，并且可以通过使用for循环为类名称分配整数，但是我不确定在哪里以及如何实现Math.floor(Math.random() * myArray.length)并正确返回它。

   function myFunction(){
    var randomize = document.getElementsByTagName("section");
    for (i = 0; i <= randomize.length; i++) {
        randomize[i].className = "section" + i;
        }
    }

我尝试过i = Math.floor(Math.random() * randomize.length);

并返回randomize[i].className = "section" + i;

但是似乎不起作用。我正在尝试结合已经读到的两件事，但是我不确定如何正确地做到这一点。

Answer 1

此版本的解决方案会根据有多少部分随机生成一个数字。它跟踪数组中已经使用的数字。只要已经使用过一个数字，它就会继续尝试。

var sections = document.querySelectorAll('section');
var usedValues = [];

[...sections].forEach(function(section){
  var classAssigned = false;
  
  while (!classAssigned) {
    let randomNumber = Math.floor(Math.random() * 100 * sections.length) % sections.length;
    
    if (classAssigned = !usedValues.includes(randomNumber)) {
      section.classList.add('section'+ randomNumber);
      usedValues.push(randomNumber);
    }
  }
});

<section>A</section>
<section>B</section>
<section>C</section>
<section>D</section>
<section>E</section>
<section>F</section>
<section>G</section>
<section>H</section>
<section>I</section>
<section>J</section>
<section>K</section>
<section>L</section>
<section>M</section>
<section>N</section>

如何根据数组长度为类名称随机设置整数？

1 个答案: