Question

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

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;
}

Answer 2

以下是对代码的非常简单的调整。根据需要调整类。

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

var imageArray = document.getElementsByClassName("class-a");
$.each(imageArray, function(index,value){
    $(value).wrap("<div class='class-b " + (randomnumber + index) + " class-c'></div>")
});

DEMO

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

2 个答案: