将多个.random类添加到没有重复的多个div中

Question

尝试向两个类(.left & .right)添加一个随机类，但是使用两个随机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

Answer 1

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

Answer 2

只有当右div没有这个类时，才将.random-*类添加到左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]);
}