Comment rendre JavaScript Math.random Répéter?

Question

Fondamentalement, j'ai une page sur mon site avec des boîtes qui glissent pour révéler une couleur de fond. Je veux que cette couleur d'arrière-plan soit aléatoire sur le chargement de la page en ajoutant une classe à l'élément, par exemple .blue, .green etc ...

J'ai créé ce code et comme vous pouvez le remarquer, il trie la classe de couleur de façon aléatoire et s'applique à l'élément, cela fonctionne pour les 6 premiers éléments, mais cette page a en particulier 12 éléments auxquels je souhaite que cela s'applique, donc ma question est comment puis-je appliquer une sélection aléatoire des classes de variables à tous ".portfolio ul li une "? Aurait-il besoin d'une forme de répétition?

C'est mon script ..

function randCol() { 
return (Math.round(Math.random())*7); } 

$(document).ready(function() { 
var classes = [ 'blue', 'orange', 'green', 'pink', 'black', 'white']; 
classes.sort(randCol); 
$('.portfolio ul li a').each(function(i, val) { 
    $(this).addClass(classes[i]); 
}); 

})

C'est ma structure de code source

<div class="portfolio"> 
<ul> 
    <li> 
     <a href="#"> 
     <img src="images/content/portfolio/sample1.png" height="175" width="294" alt="sample" class="front" /> 
     Text for behind the image       
     </a> 
    </li> 

Answer 1

Votre fonction de comparaison randCol() n » Je ne travaille vraiment pas. En premier lieu, une telle fonction devrait retourner 1, -1 ou 0 selon que le premier terme de la comparaison est supérieur, inférieur ou égal (respectivement) au second terme. Deuxièmement, le code que vous avez là-bas est apparemment destiné à référencer votre tableau de 6 éléments, mais comme écrit, il peut renvoyer des valeurs aussi élevées que 7, ce qui est 2 plus élevé que le dernier index du tableau. Il vaut mieux faire votre randoming dans le each() fonction littérale, comme suit:

$(document).ready(function() { 
var classes = [ 'blue', 'orange', 'green', 'pink', 'black', 'white']; 

$('.portfolio ul li a').each(function(i, val) { 
    var index = Math.floor(Math.random()*6); // highest value will be 5, lowest will be 0 
    $(this).addClass(classes[index]); 
}); 

Answer 2

la réponse ci-dessus peut entraîner une répétition de clours Je pense que cela peut le corriger :)

$(document).ready(function() { 
var classes = [ 'blue', 'orange', 'green', 'pink', 'black', 'white']; 
var temp=0; 
$('.portfolio ul li a').each(function(i, val) { 
    if(temp==0){ 
    var index = Math.floor(Math.random()*6);} 
    else{ 
    var index = Math.floor(Math.random()*6); 
    index=temp+index; 
    temp=index;} 
});