添加多个.random类多个div没有重复
问题描述:
试图随机类添加到两个班(。左& .right),但两个随机的div的规则,同时添加多个.random类多个div没有重复
不能出现JS:
$(document).ready(function(){
var classes = ['random-1','random-2', 'random-3']; //add as many classes as u want
var randomnumber = Math.floor(Math.random()*classes.length);
$('.left').addClass(classes[randomnumber]);
});
HTML:
<div class="left">
Left
</div>
<div class="right">
Right
</div>
.left {
background: blue;
height: 100vh;
width: 50%;
float: left;
position: relative;
}
.right {
background: red;
height: 100vh;
width: 50%;
float: right;
}
.random-1 {
background: orange;
}
.random-2 {
background: yellow;
}
.random-3 {
background: pink;
}
.random-4 {
background: green;
}
.random-5 {
background: blueviolet;
}
理想结果将是
<div class="left random-1">
Left
</div>
<div class="right random-4">
Right
</div>
答
您可以使用while循环迭代,直到两个随机和独特的类已经被选定。
function getRandomClass() {
let classes = ['random-1','random-2', 'random-3'];
let index = Math.floor(Math.random() * classes.length);
return classes[index];
}
$(document).ready(function() {
let leftClass = null;
let rightClass = null;
while (leftClass == rightClass) {
leftClass = randomClass();
rightClass = randomClass();
}
$('.left').addClass(leftClass);
$('.right').addClass(rightClass);
});
+0
这就是我正在寻找的!谢谢@Callam – Rob
答
将.random-*
类添加到左div,只有当右div没有这个类时。
var rightHasClass = $('.right').hasClass(classes[randomnumber]);
if(! rightHasClass){
$('.left').addClass(classes[randomnumber]);
}
var leftHasClass = $('.left').hasClass(classes[randomnumber]);
if(! leftHasClass){
$('.right').addClass(classes[randomnumber]);
}
你是如何应用随机性的? – UncaughtTypeError
你只需要这两个元素(或左/右元素的倍数)?如果是这样,那么一个明显而又微不足道的解决方案,而且如果你在研究过程中没有遇到过这种形式或者其他的问题,那么将会是简单地洗牌,然后将前两个值从中拿出来。 – CBroe
@UncaughtTypeError检查codepen – Pedram