L'application d'un aléatoire de la couleur de fond à plusieurs DIVs

J'ai une série de DIVs sur la page (avec à chaque fois la même classe). Sur la charge, j'aimerais aléatoirement la couleur de chaque DIV.

J'aimerais une couleur à être choisi pour une DIV, puis une couleur choisie pour le prochain et ainsi de suite.

J'ai trouvé ce post: Appliquer une couleur aléatoire à la classe des éléments individuellement?

Je ne comprends pas jquery, cependant, j'ai commencé par changer le code pour refléter le nom de la classe, je suis en utilisant:

$(document).ready(function() {
$('.main').each(function () {
    var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
    $(.jump-response).css("background-color", hue);
});
});

Plus d'aide serait grandement appréciée!

Exemple de Code ici: http://jsfiddle.net/ollyf/LmwYP/

Et je dois également ajouter de l'aléatoire de la couleur de fond est à partir d'un preset/liste prédéterminée de couleurs.

Ce qui semble être le problème (autres que de ne pas citer le .jump-response élément et le réglage de l'arrière-plan sur le même élément à chaque itération) ?
Toujours post le HTML concernés, encore mieux, un jsfiddle.
Si vous changer le fond d' .sauter-réponse, vous n'avez pas besoin de boucle .principal

InformationsquelleAutor Olly F | 2012-05-10

23

Je ne sais pas votre code html, mais en supposant que votre div sont définis comme suit.
```
<div class="jump-response">one</div>
<div class="jump-response">two</div>
```
Le principal problème dans votre code, c'est comment vous sélectionnez les éléments.

1. Solution
```
$(function() {
    $(".jump-response").each(function() {
        var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
         $(this).css("background-color", hue);
    });
});
```
jsFiddle de Démonstration

2. Solution

Vous pouvez utiliser la fonction suivante pour obtenir une couleur aléatoire
```
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}
```
et appliquer la couleur à l'aide de
```
$(".jump-response").each(function() {
    $(this).css("background-color", get_random_color());
});
```
jsFiddle de Démonstration
- Nice. Une mise à jour pour voir ce que l'OP a obtenu jsfiddle.net/r74j6/3.
- merci, ma réponse est étendu.
- Cela ne semble pas fonctionner pour moi. Il est clair que je suis absent quelque chose d'important! Voici mon code HTML et CSS (avant j'ai ajouté le jQuery). Notez que j'utilise bootstrap, j'ai donc laissé de côté le CSS pour les lignes, conteneurs, etc. De Plus, les DIVs sont rendus par l'intermédiaire d'une boucle WordPress. C'est peut-être le problème?
- où est le html ?
- Désolé! J'ai oublié d'inclure le jsFiddle lien: jsfiddle.net/ollyf/LmwYP
- Cela semble fonctionner. J'ai ajouté le jquery et ceci est le résultat de jsfiddle.net/LmwYP/1
InformationsquelleAutor dknaack
0

Je crois que vous avez juste besoin d'ajouter des guillemets autour de .jump-response
```
$(".jump-response").css("background-color", hue);
```
Aussi, vous êtes une boucle sur tous les éléments avec une classe de 'main', mais à ne rien faire à cet élément, je pense donc que vous pouvez supprimer le code de boucle.

InformationsquelleAutor Adam Albrecht

Essayer cette

$(document).ready(function() {
  $('.jump-response').each(function () {
      var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
      $(this).css("background-color", hue);
  });
});

InformationsquelleAutor Imdad

Pour obtenir des couleurs aléatoires pour les divs sur demande, en faire un signet dans votre navigateur:

javascript:jQuery("div").each(function() {var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';jQuery(this).css("background-color", hue);});

L'ouverture de "javascript:" (sans les guillemets) est nécessaire pour le signet, sinon c'est juste jQuery.

InformationsquelleAutor Kari Kääriäinen

Vous devez vous connecter pour publier un commentaire.

1. Solution

jsFiddle de Démonstration

2. Solution

jsFiddle de Démonstration