將相同的類添加到Math.random函數中的多個元素

Question

我該如何將相同的類添加到兩個元素中。 現在，它爲班級名稱爲「panzoom」的元素添加了兩個不同的類。

<div class="panzoom modell1"></div> 
<div class="panzoom modell1"></div> 



jQuery(document).ready(function(){ 
     animatemodels(); 
    }); 

    function animatemodels() { 
     var classes = [ 'modell1', 'modell2', 'modell3', 'modell4', 'modell5', 'modell6', 'modell7']; 

     jQuery(".panzoom").each(function(){ 
      jQuery(this).removeClass('modell1 ' + classes.join(' ')).addClass(classes[~~(Math.random()*classes.length)]); 
     }); 

     setTimeout(animatemodels, 7000); 
    } 

Answer 1

問題是你在每個循環的每次迭代中都會得到一個隨機類。

，而不是僅僅執行隨機類生成一次 - 沒有必要有each環，jQuery將你做它

var classes = ['modell1', 'modell2', 'modell3', 'modell4', 'modell5', 'modell6', 'modell7']; 
 
var clazz = classes.join(' '); 
 
jQuery(animatemodels); 
 

 
function animatemodels() { 
 
    jQuery(".panzoom").removeClass(clazz).addClass(clazz = classes[Math.floor(Math.random() * classes.length)]); 
 
    setTimeout(animatemodels, 1000); 
 
}

.modell1 { 
 
    background-color: red; 
 
} 
 
.modell2 { 
 
    background-color: green; 
 
} 
 
.modell3 { 
 
    background-color: blue; 
 
} 
 
.modell4 { 
 
    background-color: lightgrey; 
 
} 
 
.modell5 { 
 
    background-color: yellow; 
 
} 
 
.modell6 { 
 
    background-color: grey; 
 
} 
 
.modell7 { 
 
    background-color: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panzoom modell1">1</div> 
 
<div class="panzoom modell1">2</div>