时间戳

首页 > 解决方案 > 如何根据数组长度将整数随机设置为类名？

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

问题描述

我正在尝试为不同的部分标签随机设置一些 css 规则，但我不知道最终会得到多少个部分标签。如果有 10 个部分标签，每个部分应该有一个介于section0to之间的随机类名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;

但这似乎不起作用。我正在尝试合并我一直在阅读的两件事，但我不确定如何正确地这样做。

标签： javascript

解决方案

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

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>

推荐阅读