jQuery Wenn DIV keine Klasse "x" hat

211

In jQuery muss ich eine if-Anweisung ausführen, um festzustellen, ob $ this nicht die Klasse '.selected' enthält.

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

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

});

Wenn diese Funktion ausgeführt wird (beim Hover), möchte ich die Überblendungen nicht ausführen, wenn die Klasse '.selected' an das div angehängt wurde. Dies bedeutet, dass das Bild die volle Deckkraft hat, um anzuzeigen, dass es ausgewählt ist. Bei Google ohne Glück gesucht, obwohl es eine einfache Frage ist, wie man eine IF-Anweisung verwendet ...

jquery

— zuk1
quelle

359

Verwenden Sie den Selektor "nicht ".

Zum Beispiel anstelle von:

$(".thumbs").hover()

Versuchen:

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

— alphadogg
quelle

Denken Sie darüber nach, wenn das OP die Klasse irgendwann nach dem Dokument zum div hinzufügt. Schon dann denke ich nicht, dass Ihre Syntax funktionieren wird

— Russ Cam

@ zuk1: Nun, aus deinem Snippet nimmst du alle Elemente mit der Klasse 'thumb' und machst einen Hover () auf jedem. Wollen Sie damit sagen, dass Sie nur über einem Element schweben möchten? Was ist das für ein Element? Ich bin verwirrt.

— Alphadogg

@Russ: Richtig. Wenn Sie das oben genannte verwenden, werden alle Elemente verwendet, die sich zum Zeitpunkt der Ausführung im DOM befinden, und für diejenigen mit der Klasse 'thumb' und nicht 'selected' wird hover () ausgeführt.

— Alphadogg

Wenn Sie dies aus irgendeinem Grund außerhalb des Selektors tun müssen, können Sie es verwenden .not( ".selected" )und es funktioniert genauso. Geniales Zeug.

— Joshua Pinter

180

jQuery verfügt über die Funktion hasClass (), die true zurückgibt, wenn ein Element in der umschlossenen Menge die angegebene Klasse enthält

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

Schauen Sie sich mein Anwendungsbeispiel an

Wenn Sie mit der Maus über ein Div fahren, wird es mit normaler Geschwindigkeit auf 100% Deckkraft ausgeblendet, wenn das Div nicht die 'ausgewählte' Klasse enthält
Wenn Sie mit der Maus über ein Div fahren, wird es langsam auf 30% Deckkraft ausgeblendet, wenn das Div nicht die 'ausgewählte' Klasse enthält
Durch Klicken auf die Schaltfläche wird dem roten Div die 'ausgewählte' Klasse hinzugefügt. Die Fading-Effekte wirken sich nicht mehr auf das rote Div aus

Hier ist der Code dafür

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

BEARBEITEN:

Das ist nur eine Vermutung, aber versuchen Sie so etwas zu erreichen ?

Beide Divs beginnen bei 30% Deckkraft
Wenn Sie den Mauszeiger über ein Div halten, wird die Deckkraft auf 100% und das Ausblenden auf 30% verringert. Überblendungseffekte funktionieren nur bei Elementen, die nicht über die ausgewählte Klasse verfügen
Durch Klicken auf ein Div wird die 'ausgewählte' Klasse hinzugefügt / entfernt

jQuery Code ist hier-

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

funktioniert aus irgendeinem Grund nicht :( $ (". thumbs"). hover (function () {if (! ($ (this) .hasClass (". selected")) {$ (this) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("langsam", 0.3);}}); und es bricht meinen gesamten Code, mit dem keiner der JS arbeitet das fügte hinzu

— zuk1

Benötigt hasClass das.? hasClass ('selected') anstelle von hasClass ('. selected')

— bendewey

Russ 'Beispiel könnte funktionieren, wenn Sie "selected" anstelle von ".selected" verwenden?

— Alphadogg

Entschuldigung, wollte das nicht sagen. da drin. Jetzt aktualisiert

— Russ Cam

Ich habe meiner Antwort einige Beispiele hinzugefügt, um zu zeigen, dass der Code funktioniert

— Russ Cam

28

Ich denke, der Autor suchte:

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

— Robm
quelle

1

Ich hatte nicht erwartet, dass dies funktioniert. Funktioniert sogar wie $ (". Class1"). Not (". Class2"), was genau das ist, wonach ich gesucht habe! Vielen Dank!

— Kravits88

3

Es funktioniert, aber es ist erwähnenswert, dass dies nicht als Boolescher Wert funktioniert, da es ein Array zurückgibt. Leere Arrays sind in Javascript "wahr". Sie könnten $(this).not('.selected').lengthals Boolescher Wert verwenden, wenn Sie es wirklich wollten, aber das ist ein wenig ausführlich.

— Joe Maffei

5

Wenn Sie überprüfen, ob ein Element eine Klasse hat oder nicht, stellen Sie sicher, dass Sie nicht versehentlich einen Punkt in den Klassennamen eingefügt haben:

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

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

Nachdem ich lange auf meinen Code gestarrt hatte, wurde mir klar, dass ich das getan hatte. Ein kleiner Tippfehler wie dieser brauchte eine Stunde, um herauszufinden, was ich falsch gemacht hatte. Überprüfen Sie Ihren Code!

— Andrew
quelle

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

Wenn Sie in jedem Teil des Hovers ein if einfügen, können Sie die ausgewählte Klasse dynamisch ändern, und der Hover funktioniert weiterhin.

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

Als Beispiel habe ich auch einen Klick-Handler angehängt, um die ausgewählte Klasse auf das angeklickte Element umzuschalten. Dann feuere ich das Hover-Ereignis auf das vorherige Element ab, damit es ausgeblendet wird.

— Jeff Adams
quelle

0

Sie können auch die Methoden addClass und removeClass verwenden, um zwischen Elementen wie Registerkarten zu wechseln.

z.B

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

— Tawani
quelle

Warum nicht einfach toggleClass () verwenden?

— Russ Cam

1

Weil das Element möglicherweise andere Klassen hat.

— Tawani

0

Wie wäre es, wenn Sie anstelle eines if innerhalb des Ereignisses das Ereignis aufheben, wenn die ausgewählte Klasse angewendet wird? Ich vermute, Sie fügen die Klasse irgendwo in Ihren Code ein, sodass das Auflösen des Ereignisses dort folgendermaßen aussehen würde:

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

Der einzige Nachteil ist, dass Sie das ausgewählte Hover-Ereignis erneut abonnieren müssen, wenn Sie die ausgewählte Klasse jemals aus dem Element entfernen.

— Juan
quelle