jQuery si DIV n’a pas de classe “x”

Dans jQuery, je dois faire une instruction if pour voir si $ this ne contient pas la classe ‘.selected’.

$(".thumbs").hover(function(){ $(this).stop().fadeTo("normal", 1.0); },function(){ $(this).stop().fadeTo("slow", 0.3); }); 

Fondamentalement, lorsque cette fonction est exécutée (en survol), je ne veux pas effectuer les fondus si la classe “.selected” a été ajoutée à la div, cela signifie que l’image sera totalement opaque pour indiquer qu’elle est sélectionnée. Vous avez cherché sur Google sans succès, même si c’est une question simple: comment utiliser une instruction IF …

Utilisez le sélecteur “pas “.

Par exemple, au lieu de:

$(".thumbs").hover()

essayer:

$(".thumbs:not(.selected)").hover()

jQuery a la fonction hasClass () qui renvoie true si un élément de l’ensemble encapsulé contient la classe spécifiée

 if (!$(this).hasClass("selected")) { //do stuff } 

Jetez un oeil à mon exemple d’utilisation

  • Si vous survolez un div, il se fane à une vitesse normale à une opacité de 100% si le div ne contient pas la classe ‘selected’
  • Si vous survolez un div, il se fane à une vitesse lente jusqu’à 30% d’opacité si le div ne contient pas la classe ‘selected’
  • En cliquant sur le bouton, vous ajoutez une classe «sélectionnée» au div rouge. Les effets de fondu ne fonctionnent plus sur la div rouge

Voici le code pour cela

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    Sandbox       
One div with a thumbs class
Another one with a thumbs class

MODIFIER:

C’est juste une supposition, mais essayez-vous de réaliser quelque chose comme ça ?

  • Les deux divs commencent à 30% d’opacité
  • En survolant un div à 100% d’opacité, le survol revient à 30% d’opacité. Les effets de fondu ne fonctionnent que sur les éléments qui n’ont pas la classe ‘selected’
  • Cliquer sur un div ajoute / supprime la classe ‘selected’

Le code jQuery est ici-

 $(function() { $('.thumbs').bind('click',function(e) { $(e.target).toggleClass('selected'); } ); $('.thumbs').hover(fadeItIn, fadeItOut); $('.thumbs').css('opacity', 0.3); }); function fadeItIn(e) { if (!$(e.target).hasClass('selected')) { $(e.target).fadeTo('normal', 1.0); } } function fadeItOut(e) { if (!$(e.target).hasClass('selected')) { $(e.target).fadeTo('slow', 0.3); } } 
One div with a thumbs class
Another one with a thumbs class

Je pense que l’auteur cherchait:

 $(this).not('.selected') 

Lorsque vous vérifiez si un élément a ou non une classe, assurez-vous de ne pas avoir inséré accidentellement un point dans le nom de la classe:

 
$('div').hasClass('className'); $('div').hasClass('.className'); #will not work!!!!

Après avoir longuement regardé mon code, j’ai réalisé que j’avais fait ça. Une petite faute de frappe m’a pris une heure pour comprendre ce que j’avais mal fait. Vérifiez votre code!

 $(".thumbs").hover( function(){ if (!$(this).hasClass("selected")) { $(this).stop().fadeTo("normal", 1.0); } }, function(){ if (!$(this).hasClass("selected")) { $(this).stop().fadeTo("slow", 0.3); } } ); 

Si vous placez un if dans chaque partie du survol, vous pourrez modifier la classe select de manière dynamic et le survol fonctionnera toujours.

 $(".thumbs").click(function() { $(".thumbs").each(function () { if ($(this).hasClass("selected")) { $(this).removeClass("selected"); $(this).hover(); } }); $(this).addClass("selected"); }); 

A titre d’exemple, j’ai également joint un gestionnaire de clics pour basculer la classe sélectionnée vers l’élément cliqué. Ensuite, je déclenche l’événement en vol stationnaire sur l’élément précédent pour le faire disparaître.

Vous pouvez également utiliser les méthodes addClass et removeClass pour basculer entre des éléments tels que des tabs.

par exemple

 if($(element).hasClass("selected")) $(element).removeClass("selected"); 

Que diriez-vous au lieu d’utiliser un si dans l’événement, vous déconnectez l’événement lorsque la classe select est appliquée? Je suppose que vous ajoutez la classe à l’intérieur de votre code quelque part, donc l’événement non lié devrait ressembler à ceci:

 $(element).addClass( 'selected' ).unbind( 'hover' ); 

Le seul inconvénient est que si vous supprimez la classe sélectionnée de l’élément, vous devez à nouveau l’abonner à l’événement de survol.