は、2つのクラス（.LEFT & .RIGHT）にランダムクラスを追加しようと

Question

重複せずに複数のdiv要素に複数.randomクラスを追加するが、2つのランダムの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; 
    } 

に最適結果は、次の2つのランダムでユニークなクラスになるまで繰り返し処理が選択されていることを、whileループを使用することができます

<div class="left random-1"> 
    Left 
</div> 

<div class="right random-4"> 
    Right 
</div> 

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

Answer 1

だろう。

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

.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]); 
}