jQuery si DIV n'a pas la classe «x»

211

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 à pleine opacité pour signifier qu'elle est sélectionnée. Recherche sur Google sans succès même s'il s'agit d'une simple question de savoir comment utiliser une instruction IF ...

jquery

— zuk1
source

359

Utilisez le sélecteur "non ".

Par exemple, au lieu de:

$(".thumbs").hover()

essayer:

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

— alphadogg
source

en y réfléchissant, si l'OP ajoute la classe à la div à un moment donné après le document. déjà alors je ne pense pas que votre syntaxe fonctionnera

— Russ Cam

@ zuk1: Eh bien, à partir de votre extrait de code, vous prenez tous les éléments avec la classe 'thumb' et faites un survol () sur chacun. Êtes-vous en train de dire que vous voulez simplement survoler un élément? Quel est cet élément? Je suis confus.

— alphadogg

@Russ: Correct. Si vous utilisez ce qui précède, alors il prendra tous les elems actuellement dans le DOM au moment de son exécution, et pour ceux avec la classe 'thumb' et non 'selected', il fera hover ().

— alphadogg

Si vous devez le faire en dehors du sélecteur pour une raison quelconque, vous pouvez l'utiliser .not( ".selected" )et cela fonctionnera de la même manière. Des trucs géniaux.

— Joshua Pinter

180

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

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

Jetez un œil à mon exemple d'utilisation

Si vous survolez un div, il s'estompe en vitesse normale à 100% d'opacité si le div ne contient pas la classe `` sélectionnée ''
Si vous survolez un div, il s'estompe à vitesse lente jusqu'à 30% d'opacité si le div ne contient pas la classe «sélectionnée»
Cliquer sur le bouton ajoute la classe «sélectionnée» à la div rouge. Les effets de décoloration ne fonctionnent plus sur le div rouge

Voici le code pour ça

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
</style>


<!-- jQuery code here -->
<script type="text/javascript">
$(function() {

$('#myButton').click(function(e) {
$('#div2').addClass('selected');
});

$('.thumbs').bind('click',function(e) { alert('You clicked ' + e.target.id ); } );

$('.thumbs').hover(fadeItIn, fadeItOut);


});

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); 
 } 
}
</script>


</head>
<body>
<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;"> 
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;">
Another one with a thumbs class
</div>
<input type="button" id="myButton" value="add 'selected' class to red div" />
</body>
</html>

ÉDITER:

ce n'est qu'une supposition, mais essayez-vous de réaliser quelque chose comme ça ?

Les deux divisions commencent à 30% d'opacité
Le survol d'une division s'estompe à 100% d'opacité, tandis que le survol de la gradation revient à 30% d'opacité. Les effets de fondu ne fonctionnent que sur les éléments qui n'ont pas la classe «sélectionnée»
Cliquer sur un div ajoute / supprime la classe «sélectionnée»

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); 
 } 
}

<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;"> 
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;">
Another one with a thumbs class
</div>

— Russ Cam
source

ne fonctionne pas pour une raison quelconque :( $ (". thumbs"). hover (function () {if (! ($ (this) .hasClass (". selected")) {$ (this) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("slow", 0.3);}}); et il casse tout mon code, aucun des JS ne fonctionne avec qui a ajouté

— zuk1

hasClass nécessite-t-il le.? hasClass ('sélectionné') au lieu de hasClass ('. sélectionné')

— bendewey

L'exemple de Russ peut fonctionner si vous utilisez "sélectionné" au lieu de ". Sélectionné"?

— alphadogg

excuses, ne voulait pas mettre le. là-dedans. Mis à jour maintenant

— Russ Cam

J'ai ajouté quelques exemples à ma réponse, pour montrer que le code fonctionne

— Russ Cam

28

Je pense que l'auteur recherchait:

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

— robm
source

1

Je ne m'attendais pas à ce que cela fonctionne. Fonctionne même comme $ (". Class1"). Pas (". Class2") qui est exactement ce que je cherchais! Merci!

— kravits88

3

Cela fonctionne, mais il convient de noter que cela ne fonctionne pas comme un booléen, car il renvoie un tableau. Les tableaux vides sont "véridiques" en Javascript. Vous pouvez l'utiliser $(this).not('.selected').lengthcomme booléen si vous le voulez vraiment, mais c'est un peu bavard.

— Joe Maffei

5

Lorsque vous vérifiez si un élément a ou n'a pas de classe, assurez-vous que vous n'avez pas mis accidentellement un point dans le nom de la classe:

<div class="className"></div>

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

Après avoir longtemps regardé mon code, j'ai réalisé que j'avais fait cela. Une petite faute de frappe comme celle-ci m'a pris une heure pour comprendre ce que j'avais fait de mal. Vérifiez votre code!

— Andrew
source

1

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

Mettre un if à l'intérieur de chaque partie du survol vous permettra de modifier dynamiquement la classe de sélection et le survol continuera de fonctionner.

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

À 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 de survol sur l'élément précédent pour le faire disparaître.

— Jeff Adams
source

0

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

par exemple

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

— Tawani
source

pourquoi ne pas simplement utiliser toggleClass ()?

— Russ Cam

1

Parce que l'élément peut avoir d'autres classes.

— Tawani

0

Que diriez-vous, au lieu d'utiliser un if à l'intérieur de l'événement, de dissocier l'événement lorsque la classe select est appliquée? Je suppose que vous ajoutez quelque part la classe à l'intérieur de votre code, donc dissocier l'événement ressemblerait à 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 la souscrire à l'événement de survol.

— Juan
source