CSS Randomize classes à l'aide Jquery

Je suis assez nouveau pour jQuery et je suis en train de tourner 6 classes CSSCSS Randomize classes à l'aide Jquery

.img 
.img1 
.img2 
.img3 
.img4 
.img5

Une seule de ces classes a "display: block;" les autres ont "display: none". J'essaie de randomiser l'apparence de ces classes - pour ces 6 classes - en rendant le "display: block" actuel à "display: none" puis à un autre changement de classe en "Display: block" chaque fois que le charges de page?

Quelqu'un pourrait-il nous aider?

Source

2009-10-29 Anonymous

si vous le souhaitez pour basculer entre l'affichage: bloc et display: none qui est seulement deux options, alors pourquoi 6 classes? – TStamper

Je ne suis pas sûr de ce que vous voulez dire. Ces classes sont-elles appliquées aux éléments DOM et vous souhaitez que ces éléments DOM aient une classe aléatoire affectée à chaque chargement de page? –

var ran = rand(0,5) 
$('.img').hide(); 
$('.img' + ran).show();

Donnez tous les éléments 2 classes 1 'img' et une classe unique 'img1, img2 etc'

Source

2009-10-29 11:55:39 LiamB

Droit, plusieurs classes, bien fait +1 –

Je viens de lire cette dernière ligne, mais ne devrait pas commencer la classe unique avec 'img0' – TStamper

Oui, si vous voulez le faire commencer par 1 juste ajouter +1 à la course var – LiamB

Juste la classe modifier de toutes les images excluent celle qui a été choisie au hasard.

code pseudo:

var img_id = rand(0,5); 

for (i=0;i<5; ++i) 
{ 
    if (i!=img_id) 
     $("image_"+img_id).class = hiddenclass; 
}

Source

2009-10-29 11:55:57 Aif

Votre question est claire. Je suppose que vous essayez d'afficher aléatoirement tous les éléments qui correspondent à l'une de ces classes.

Vous pouvez générer un nombre aléatoire compris entre 0 et 6 en écrivant parseInt(Math.random() * 6, 10).

Vous pouvez donc écrire quelque chose comme ceci: (et changer .img à .img0)

var indexToShow = parseInt(Math.random() * 6, 10); 

for(var i = 0; i <= 6; i++) { 
    if(i === indexToShow) 
     $('.img' + i).show(); 
    else 
     $('.img' + i).hide(); 
}

Si vous faites une autre classe (par exemple, .img) et l'ajouter, vous pouvez faire à tous les éléments plus simple :

$('.img').hide(); 
$('.img' + parseInt(Math.random() * 6, 10)).show()

Source

2009-10-29 11:57:44 SLaks

Choisissez-en une à afficher, puis massez-les toutes, filtrez la classe que vous souhaitez afficher et affichez-la. Ce sera plus facile si vous leur donnez une classe commune, par exemple img pour faciliter la sélection globale.

var showClass = '.img' + parseInt(Math.random() * 6, 10); 

$('.img').hide().filter(showClass).show();

Source

2009-10-29 12:05:54 tvanfosson

Vous pouvez randomiser vos styles en utilisant JQuery. Regardez cet exemple sur CodePen: http://codepen.io/aziev/pen/xwpREN

// put in this array your classes 
classes = ['class1', 'class2', 'class3']; 

max = classes.length - 1; 
currentClass = Math.round(Math.random() * max); 

// change '.block' to selector of your element 
$('.block').addClass(classes[currentClass]);

Source

2015-10-21 07:45:41

CSS Randomize classes à l'aide Jquery

Répondre

Questions connexes