添加多個.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沒有重複

回答

相關問題