javascript - 使用 javascript 需要在整个页面中随机且唯一的数字

Question

我正在使用 javascript 将图像包装在我的网页上，但我想为每个图像分配一个唯一但随机的类名。下面的代码分配一个随机的类名，但它为每个图像分配相同的类名。如何更改代码以允许每个图像具有唯一且随机的类名称？

var randomnumber=Math.floor(Math.random()*10)

var bphotorightnomargin = document.getElementsByClassName("body-photo alignright no-margin-left");
$(bphotorightnomargin).toggleClass( "body-photo alignright no-margin-left" ).wrap( "<div class='body-photo-wrap body-photo-" + randomnumber + " alignright no-margin-left'></div>" );

Answer 1

看起来您正在重复使用您设置随机数的同一变量。将其包装在一个函数中，然后调用该函数:

function getRandomNumber() {
  return Math.floor(Math.random()*10);
}

那么你可以这样做:

$(bphotorightnomargin).each(function() {
  $(this).toggleClass( "body-photo alignright no-margin-left" )
  .wrap( "<div class='body-photo-wrap body-photo-" 
    + getRandomNumber() 
    + " alignright no-margin-left'></div>" );
});

请注意，我添加了 .each，它将迭代您的 html 元素列表，为每个元素应用一个唯一的类。

但同一个数字仍有可能出现多次。就像你可能会得到这个数字 5、3 次。您可以将已经获得的数字存储在数组中，并检查以确保该数字不会再次出现。

var existingNumbers = [];

function getRandomNumber() {
  var randomNum = Math.floor(Math.random()*10);
  while(!isUnique(randomNum)) {
    randomNum = Math.floor(Math.random()*10);
  }
  existingNumbers.push(randomNum);
  return randomNum;
}

function isUnique(number) {
  var length = existingNumbers.length;
  for(var i = 0; i < length; i++) {
    if(number === existingNumbers[i]) {
      return false;
    }
  }
  return true;
}