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

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