jQuery Jeśli DIV nie ma klasy „x”

211

W jQuery muszę wykonać instrukcję if, aby zobaczyć, czy $ nie zawiera klasy „.selected”.

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

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

});

Zasadniczo, gdy ta funkcja jest uruchomiona (po najechaniu myszą) nie chcę wykonywać przenikania, jeśli klasa „.selected” została dołączona do div, będzie to oznaczać, że obraz będzie miał pełne krycie, co oznacza, że ​​jest wybrany. Szukałem w Google bez powodzenia, chociaż jest to proste pytanie, jak używać instrukcji IF ...

jquery zuk1
źródło

Odpowiedzi:

359

Użyj „nie selektora ”.

Na przykład zamiast:

$(".thumbs").hover()

próbować:

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

alphadogg
źródło
myśląc o tym, jeśli OP dodaje klasę do div w pewnym momencie po dokumencie. już nie sądzę, że twoja składnia zadziała
Russ Cam
@ zuk1: Cóż, we fragmencie bierzesz wszystkie elementy za pomocą klasy „thumb” i wykonujesz hover () na każdym z nich. Mówisz, że chcesz po prostu najechać kursorem na jeden element? Co to za jeden element? Jestem zdezorientowany.
alphadogg
@Russ: Poprawnie. Jeśli użyjesz powyższego, to weźmie on wszystkie elementy znajdujące się obecnie w DOM w momencie jego wykonania, a dla tych z klasą „kciuk”, a nie „zaznaczony”, wykona hover ().
alphadogg
Jeśli z jakiegoś powodu musisz to zrobić poza selektorem, możesz go użyć .not( ".selected" )i będzie działać tak samo. Genialne rzeczy.
Joshua Pinter,
180

jQuery ma funkcję hasClass (), która zwraca true, jeśli dowolny element w zawiniętym zestawie zawiera określoną klasę

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

Spójrz na mój przykład użycia

  • Jeśli najedziesz kursorem na div, jego normalna prędkość spada do 100% krycia, jeśli div nie zawiera „wybranej” klasy
  • Jeśli unosisz się nad divem, zanika on przy niskiej prędkości do 30% krycia, jeśli div nie zawiera klasy „wybranej”
  • Kliknięcie przycisku dodaje klasę „wybraną” do czerwonego diva. Efekty zanikania nie działają już na czerwony div

Oto jego kod

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

EDYTOWAĆ:

to tylko przypuszczenie, ale czy próbujesz osiągnąć coś takiego ?

  • Oba divy zaczynają od 30% krycia
  • Najechanie kursorem na div zmienia się na 100% krycia, a najechanie zanika do 30% krycia. Efekty przenikania działają tylko na elementach, które nie mają klasy „wybranej”
  • Kliknięcie div dodaje / usuwa „wybraną” klasę

Kod jQuery jest tutaj-

$(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
źródło
z jakiegoś powodu nie działa :( $ (". thumbs"). hover (function () {if (! ($ (this) .hasClass (". selected")) {$ (this) .stop (). fadeTo ("normal", 1.0);}, function () {$ (this) .stop (). fadeTo ("slow", 0.3);}}); i psuje cały mój kod, żaden z JS nie działa z który dodał
zuk1
czy hasClass wymaga.? hasClass ('selected') zamiast hasClass ('. selected')
bendewey
Przykład Russa może działać, jeśli użyjesz „zaznaczone” zamiast „.selected”?
alphadogg
przepraszam, nie chciałem powiedzieć. tam. Zaktualizowano teraz
Russ Cam
Dodałem kilka przykładów do mojej odpowiedzi, aby pokazać działający kod
Russ Cam
28

Myślę, że autor szukał:

$(this).not('.selected')
robm
źródło
1
Nie spodziewałem się, że to zadziała. Działa nawet jak $ („. Class1”). Not („. Class2”), co jest dokładnie tym, czego szukałem! Dzięki!
kravits88
3
Działa, ale warto zauważyć, że nie działa to jako wartość logiczna, ponieważ zwraca tablicę. Puste tablice w JavaScript są „prawdą”. Możesz użyć $(this).not('.selected').lengthlogicznej wartości, jeśli naprawdę tego chcesz, ale to trochę gadatliwe.
Joe Maffei,
5

Podczas sprawdzania, czy element ma lub nie ma klasy, upewnij się, że przypadkowo nie wstawiłeś kropki w nazwie klasy:

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

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

Po długim czasie wpatrywania się w mój kod zrozumiałem, że to zrobiłem. Taka literówka zajęła mi godzinę, żeby dowiedzieć się, co zrobiłem źle. Sprawdź swój kod!

Andrzej
źródło
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); 
        }           
    }
);

Umieszczenie znaku „if” w każdej części aktywowania pozwoli ci dynamicznie zmienić wybraną klasę, a aktywowanie będzie nadal działać.

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

Jako przykład podłączyłem również moduł obsługi kliknięć, aby przełączyć wybraną klasę na kliknięty element. Następnie uruchamiam zdarzenie aktywowania na poprzednim elemencie, aby zniknęło.

Jeff Adams
źródło
0

Możesz także używać metod addClass i removeClass do przełączania między elementami, takimi jak karty.

na przykład

if($(element).hasClass("selected"))
   $(element).removeClass("selected");
Tawani
źródło
dlaczego nie użyć po prostu toggleClass ()?
Russ Cam
1
Ponieważ element może mieć inne klasy.
Tawani
0

Co powiesz na to, aby zamiast używać if w wydarzeniu, cofniesz powiązanie ze zdarzeniem po zastosowaniu wybranej klasy? Domyślam się, że gdzieś dodajesz klasę do swojego kodu, więc rozpięcie zdarzenia będzie wyglądało tak:

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

Jedynym minusem jest to, że jeśli kiedykolwiek usuniesz wybraną klasę z elementu, musisz ponownie zasubskrybować ją do zdarzenia hover.

Juan
źródło