添加多个.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>

https://codepen.io/anon/pen/OOJaqL

来源

2017-10-29 Rob

你是如何应用随机性的？ – UncaughtTypeError

你只需要这两个元素（或左/右元素的倍数）？如果是这样，那么一个明显而又微不足道的解决方案，而且如果你在研究过程中没有遇到过这种形式或者其他的问题，那么将会是简单地洗牌，然后将前两个值从中拿出来。 – CBroe

@UncaughtTypeError检查codepen – Pedram

您可以使用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); 
});

来源

2017-10-29 08:48:00 Callam

这就是我正在寻找的！谢谢@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]); 
}

来源

2017-10-29 08:51:06

添加多个.random类多个div没有重复

回答

相关问题