1. 首页
  2. 问答
  3. 将数组中的随机类添加到每个指定元素，排除最后使用的类

将数组中的随机类添加到每个指定元素，排除最后使用的类

2017-09-18 26 views
0

我有一个类的数组，我想从这个数组中应用随机类到指定的元素 - 这很简单。但我需要避免像连续两个或多个元素具有相同类的情况。将数组中的随机类添加到每个指定元素，排除最后使用的类

现在我有这样的事情：

$(document).ready(function(){ 
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"]; 

    $(".img-cap").each(function(){ 
     $(this).addClass(classes[~~(Math.random()*classes.length)]); 
    }); 
});

来源

2017-09-18 insanebear

+0

如何含有'.IMG-cap's行是什么样子？ – caramba

+0

简单地将最后选择的随机值保留在某个变量中，并检查该变量以避免重复出现问题？ – jrook

+0

是否必须使用类数组中的所有条目？或者只要它不重复自己就可以吗？ – entiendoNull

回答

3

关键是将最后一个随机值保存在变量中，然后将其从数组中删除。在下面的迭代中，类将不在数组中，所以不可能两次使用同一个类。最重要的是在之后选择一个新的随机班级，推动最后使用的班级。

$(document).ready(function(){ 
 
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"], last_class; 
 

 
    $(".img-cap").each(function(){ 
 
    \t var rdm_int = ~~(Math.random()*classes.length); 
 
     var rdm_class = classes.splice(rdm_int, 1)[0]; 
 
     if(last_class) classes.push(last_class) 
 
     $(this).addClass(rdm_class); 
 
     last_class = rdm_class; 
 
    }); 
 
});
.img-cap{ 
 
    width : 100px; 
 
    height : 100px 
 
} 
 

 
.bg1{background:red} 
 
.bg2{background:blue} 
 
.bg3{background:yellow} 
 
.bg4{background:orange} 
 
.bg5{background:purple}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div> 
 
<div class="img-cap"></div>

来源

2017-09-18 18:44:04

0

可能比你想要的东西有点不同，但是这将运行，直到没有更多的类列表中，每次随机挑选一个和分配它。 Vanilla JS解决方案也是如此。

//Running as many times as there are items in classes 
for (i=0; i<classes.length; i++) { 
    var randomPick = Math.floor(Math.random()*classes.length)+1]; 

    //Change this to target whatever you are adding the classes to 
    document.getElementsByClassName("img-cap").classList.add(classes[randomPick]); 

    //Will edit the class list, removing it so it may not be picked again 
    classes.splice(randomPick,1); 
}

来源

2017-09-18 18:33:45

0

你可以先缓存随机数，然后使用hasClass()方法来确定是否要应用它。

$(document).ready(function(){ 
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"]; 

    $(".img-cap").each(function(){ 
     var class_to_add = ~~(Math.random()*classes.length); 
     console.log(class_to_add); 
     if($(this).hasClass(classes[class_to_add]) === false) { 
      $(this).addClass(classes[class_to_add]); 
     } 
    }); 
});

这里充分披露，我不知道什么~~(Math.random()*classes.length会产生这个帖子之前，所以谢谢你。

来源

2017-09-18 18:35:49

+0

这并不回答这个问题，该问题询问如何防止将同一个类添加到一行中的两个元素，而不是如何防止将同一个类添加到元素两次。 –

0

克隆类数组，然后使用克隆来设置类，并从克隆中删除所有类，直到没有剩下任何东西。然后再次克隆。

var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"]; 
 
var classesClone = classes.slice(0); // clone classes 
 

 
$('.img-cap').each(function(){ 
 
    if(0 == classesClone.length) { 
 
     // lets clone again if classesClone is empty 
 
     classesClone = classes.slice(0); 
 
    } 
 

 
    var randomNumber = Math.floor(Math.random() * classesClone.length); 
 
    
 
    $(this).addClass(classesClone[randomNumber]); 
 
    classesClone.splice(randomNumber, 1); // remove item from clone which has just been used 
 
});
.row { 
 
    border:solid 1px black; 
 
    float: left; 
 
} 
 
.img-cap { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 10px; 
 
} 
 

 
.bg1 { 
 
    background-color: orange; 
 
} 
 

 
.bg2 { 
 
    background-color: green; 
 
} 
 

 
.bg3 { 
 
    background-color: red; 
 
} 
 

 
.bg4 { 
 
    background-color: navy; 
 
} 
 

 
.bg5 { 
 
    background-color: lime; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
    <div class="img-cap"></div> 
 
</div>

来源

2017-09-18 18:37:05 caramba

0

你可以不喜欢这样。 它会随机使用正在使用的类，一旦使用它将从您的classes array中删除该条目。

$(document).ready(function(){ 
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"]; 

    $(".img-cap").each(function(){ 
     var cssClass = classes[~~(Math.random()*classes.length)], 
      index = classes.indexOf(cssClass) 

     classes.splice(index, 1); 

     $(this).addClass(cssClass); 

    }); 
});

来源

2017-09-18 18:38:21 entiendoNull

0

如何简单：

$(document).ready(function(){ 
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"]; 
    var temp ='a'; 
    var x = 'a'; 
    $(".img-cap").each(function(){ 
     while(x===temp) 
      x = classes[~~(Math.random()*classes.length)] 
     temp = x 
    //console.log(x) 
    $(this).addClass(x); 
    }); 
});

同时在foreach循环每次迭代中，while循环不断地随机选择一个类，直到选定类变得比前一次迭代选择的类从而保证不同没有两个连续的元素获得相同的类。

Karl-AndréGagnon的失败更为彻底（速度更快）。但是如果你只有几个类可供选择，上面的while循环不应该花很长时间才能产生新的值。如果有很多课程，那么Karl的解决方案可能是更好的选择。

来源

2017-09-18 18:41:11 jrook

相关问题

 相关问题