我正在尝试将类添加到具有相同类的三个div,但我不希望任何类添加重复。
我有一个脚本可以将类添加到同时显示的1,2或3个div。期望的效果是将图像显示为背景图像,并且在我的样式表中,我有多个类,这些图像附加到它们上面。这些类已定义并添加到以下代码中的相关div中:
的Javascript
$(document).ready(function(){
var classes = ["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11"];
$(".S").each(function(){
$(this).addClass(classes[~~(Math.random()*classes.length)]);
});
});
此代码附加到以下 HTML
<div class="brick">
<div class="blend S"></div>
<div class="blend S"></div>
<div class="blend S"></div>
</div>
以下是目前可能返回的结果的一个结果示例:
<div class="brick">
<div class="blend S a01"></div>
<div class="blend S a01"></div>
<div class="blend S a06"></div>
</div>
请注意重复 a01 。以下是期望的结果:
<div class="brick">
<div class="blend S a05"></div>
<div class="blend S a02"></div>
<div class="blend S a11"></div>
</div>
Here is a live test。如果有人对如何规避重复问题有任何jquery建议,我将非常感激。谢谢!
答案 0 :(得分:3)
确保不重复的最简单方法是将列表洗牌并采用前3个元素:
$(document).ready(function(){
var classes = shuffle(["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11"]);
$(".S").each(function(i){
$(this).addClass(classes[i]);
});
});
请注意,我没有包含shuffle
的实现。
答案 1 :(得分:2)
您可以使用splice()
。如果你用随机索引和1作为长度调用它将删除该单个项目并将其返回到数组中,您可以从中获取第一个(也是唯一的)项目。由于它删除了它使用的项目,因此不会复制任何项目。
$(document).ready(function(){
var classes = ["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11"];
$(".S").each(function(){
$(this).addClass(classes.splice(~~(Math.random()*classes.length), 1)[0]);
});
});
&#13;
.blend {
width: 150px;
height: 30px;
}
.a01 {
background: red;
}
.a02 {
background: blue;
}
.a03 {
background: green;
}
.a04 {
background: black;
}
.a05 {
background: yellow;
}
.a06 {
background: purple;
}
.a07 {
background: orange;
}
.a08 {
background: grey;
}
.a09 {
background: cyan;
}
.a10 {
background: pink;
}
.a11 {
background: lightgreen;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="brick">
<div class="blend S"></div>
<div class="blend S"></div>
<div class="blend S"></div>
</div>
&#13;
答案 2 :(得分:0)
如果你不介意修改原始数组,那么拼接数组会不会重复元素呢?
$(document).ready(function(){
var classes = ["a01", "a02", "a03", "a04"];
$(".S").each(function(){
$(this).addClass(classes.splice(Math.floor(Math.random() * classes.length), 1));
});
});
只是一个建议。 Fiddle