jQuery Se DIV non ha classe "x"

211

In jQuery devo fare un'istruzione if per vedere se $ this non contiene la classe '.selected'.

$(".thumbs").hover(function(){

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

});

Fondamentalmente quando questa funzione viene eseguita (al passaggio del mouse) Non voglio eseguire le dissolvenze se la classe '.selected' è stata aggiunta al div, questo significa che l'immagine sarà completamente opacizzata per indicare che è selezionata. Ho cercato su Google senza fortuna anche se è una semplice domanda su come utilizzare un'istruzione IF ...

jquery

— zuk1
fonte

359

Utilizzare il selettore "non ".

Ad esempio, anziché:

$(".thumbs").hover()

provare:

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

— alphadogg
fonte

a pensarci, se l'OP sta aggiungendo la classe al div ad un certo punto dopo il documento. Già allora non credo che la tua sintassi funzionerà

— Russ Cam

@ zuk1: bene, dal tuo frammento, prendi tutti gli elementi con la classe "pollice" e fai un passaggio con il mouse () su ciascuno di essi. Stai dicendo che vuoi semplicemente passare con il mouse su un elemento? Cos'è quell'elemento? Sono confuso.

— alphadogg,

@Russ: corretto. Se usi quanto sopra, allora prenderà tutti gli elementi attualmente presenti nel DOM nel momento in cui viene eseguito, e quelli con classe 'pollice' e non 'selezionati' faranno il passaggio del mouse ().

— alphadogg,

Se è necessario farlo al di fuori del selettore per qualche motivo, è possibile utilizzare .not( ".selected" )e funzionerà allo stesso modo. Roba geniale.

— Joshua Pinter,

180

jQuery ha la funzione hasClass () che restituisce true se qualsiasi elemento nel set di wrapping contiene la classe specificata

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

Dai un'occhiata al mio esempio di utilizzo

Se passi con il mouse su un div, la velocità diminuisce al 100% di opacità se il div non contiene la classe "selezionata"
Se passi da un div, si attenua a bassa velocità con un'opacità del 30% se il div non contiene la classe "selezionata"
Facendo clic sul pulsante si aggiunge la classe 'selezionata' al div rosso. Gli effetti di dissolvenza non funzionano più sul div rosso

Ecco il codice per questo

<!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>

MODIFICARE:

questa è solo una supposizione, ma stai cercando di ottenere qualcosa del genere ?

Entrambi i div iniziano con un'opacità del 30%
Passare il mouse sopra un div si riduce al 100% di opacità, passando il mouse si riduce al 30% di opacità. Gli effetti di dissolvenza funzionano solo su elementi che non hanno la classe "selezionata"
Facendo clic su un div si aggiunge / rimuove la classe "selezionata"

Il codice jQuery è qui-

$(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
fonte

non funziona per qualche motivo :( $ (". thumbs"). hover (function () {if (! ($ (this) .hasClass (". selected")) {$ (this) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("slow", 0.3);}}); e rompe il mio intero codice, nessuno dei JS funziona con che ha aggiunto

— zuk1

hasClass richiede il.? hasClass ('selected') invece di hasClass ('. selected')

— bendewey,

L'esempio di Russ potrebbe funzionare se si utilizza "selezionato" anziché ".selezionato"?

— alphadogg,

scuse, non intendevo mettere il. lì dentro. Aggiornato ora

— Russ Cam

Ho aggiunto alcuni esempi alla mia risposta, per mostrare che il codice funziona

— Russ Cam

28

Penso che l'autore stesse cercando:

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

— robm
fonte

1

Non mi aspettavo che funzionasse. Funziona anche come $ (". Class1"). Not (". Class2") che è esattamente quello che stavo cercando! Grazie!

— kravits88

3

Funziona, ma vale la pena notare che questo non funziona come un valore booleano, poiché restituisce un array. Le matrici vuote sono "veritiere" in Javascript. Potresti usare $(this).not('.selected').lengthcome booleano se lo volessi davvero, ma è un po 'prolisso.

— Joe Maffei,

5

Quando controlli se un elemento ha o non ha una classe, assicurati di non aver inserito accidentalmente un punto nel nome della classe:

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

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

Dopo molto tempo a fissare il mio codice mi sono reso conto di averlo fatto. Un piccolo errore del genere mi ha richiesto un'ora per capire cosa avevo fatto di sbagliato. Controlla il tuo codice!

— Andrea
fonte

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

Mettere un if all'interno di ciascuna parte dell'hover ti permetterà di cambiare dinamicamente la classe selezionata e l'hover continuerà a funzionare.

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

Ad esempio, ho anche collegato un gestore di clic per passare la classe selezionata all'elemento selezionato. Quindi sparo l'evento hover sull'elemento precedente per farlo svanire.

— Jeff Adams
fonte

0

Puoi anche usare i metodi addClass e removeClass per alternare tra elementi come le schede.

per esempio

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

— TAWANI
fonte

perché non usare semplicemente toggleClass ()?

— Russ Cam,

1

Perché l'elemento potrebbe avere altre classi.

— Tawani,

0

Che ne dite invece di usare un if all'interno dell'evento, si scioglie l'evento quando viene applicata la classe select? Immagino che tu abbia aggiunto la classe all'interno del tuo codice da qualche parte, quindi non vincolando l'evento ci sarebbe questo:

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

L'unico aspetto negativo è che se si rimuove mai la classe selezionata dall'elemento, è necessario iscriverla di nuovo all'evento hover.

— Juan
fonte