[JS-jquery] addClass niet gevonden door hasClass

[edwinistrator]

Ik heb en een stylesheet switcher. Als ik van style switch gebeurd dit door javascript. Ik wil verschillende hover effecten bij de verschillende layouts. Maar daar gaat het mis, jquery hover script ziet niet dat ik een div een andere class heb gegegeven en dus voert hij geen andere hover uit. Maar via een alert en een background-color verandering, check of deze wel gebeurt.

Het hoverScript wat ik nu toe pas werkt dus niet goed, want 'hasClass' werkt niet meer als ik de class name heb veranderd. Ik kan nergens in de documentatie van jquery of nieuwsgroepen iets vinden om dit anders aan te pakken.

Als je tussen layouts switched en dan refreshed zie je wel de andere hover effecten...

Hier een live demo:
http://edwinistrator.com/stuff/jquery-problem/

---

JavaScript:

$(document).ready(function(){
    if($("#content").hasClass("thumbs")){
        $(".thumbs .content_block .overlay").css({"opacity": 0 }); 
        $(".thumbs .content_block").click(function(){
            window.location=$(this).find("a").attr("href");return false;
        });
        $(".thumbs .content_block").hover(function(){
            $(this).find(".overlay").css({'display' : 'block'});
            $(this).find("img").stop().animate({ "opacity": .2 }, 300);
            $(this).find(".overlay").stop().animate({ "opacity": 1 }, 300);
        }, function() {
            $(this).find("img").stop().animate({ "opacity": 1 }, 300);
            $(this).find(".overlay").stop().animate({ "opacity": 0 }, 300);
            });
    } else if($("#content").hasClass("small"))
        $(".small .content_block").click(function(){
            window.location=$(this).find("a").attr("href");return false;
        });
        $(".small .content_block").hover(function(){
            $(this).find(".overlay").css({'display' : 'block'});
            $(this).find("img").stop().animate({ "opacity": .8 }, 300);
            $(this).find(".overlay").stop().animate({ "opacity": 0.8 }, 300);
        }, function() {
            $(this).find("img").stop().animate({ "opacity": 1 }, 300);
            $(this).find(".overlay").stop().animate({ "opacity": 1 }, 300);
        });
    } else if($("#content").hasClass("big"))
        $(".big .content_block").click(function(){
            window.location=$(this).find("a").attr("href");return false;
        });
        $(".big .content_block").hover(function(){
            $(this).find(".overlay").css({'display' : 'block'});
            $(this).find("img").stop().animate({ "opacity": .8 }, 300);
            $(this).find(".overlay").stop().animate({ "opacity": 0.8 }, 300);
        }, function() {
            $(this).find("img").stop().animate({ "opacity": 1 }, 300);
            $(this).find(".overlay").stop().animate({ "opacity": 1 }, 300);
        }); 
    }
});

[Verwijderd]

Je bent de {} vergeten om je if-blokken. JavaScript is geen python...

[edwinistrator]

Als ik onderstaande doe, wordt de hover helemaal niet meer gedaan...

JavaScript:

if($("#content").hasClass("thumbs")){
    // doe iets
}

In voorbeeld van jquery staat {} ook niet in voorbeeld, toch?

[.oisyn]

Nee duh, omdat hij daar steeds een .animate() doet ipv $(). Die animate() past ie dus toe op het resultaat van de vorige expressie.

Als jij een statement zet na een if, dan hoort het statement daarna niet meer binnen die if. Met { } kun je statements groeperen als een enkel statement.

Dit zal gewoon "doei" alerten:

JavaScript:

if (false)
    alert("hoi");
    alert("doei");

Dit alert niets:

JavaScript:

if (false)
{
    alert("hoi");
    alert("doei");
}

object.bla().bla().bla().bla().bla(); is gewoon maar 1 statement. Dat je elke .bla() op een nieuwe regel zet doet er weinig toe

[ Voor 44% gewijzigd door .oisyn op 20-05-2009 13:04 ]

[Bosmonster]

edwinistrator schreef op woensdag 20 mei 2009 @ 12:43:
Als ik onderstaande doe, wordt de hover helemaal niet meer gedaan...

JavaScript:

if($("#content").hasClass("thumbs")){
    // doe iets
}

In voorbeeld van jquery staat {} ook niet in voorbeeld, toch?

Omdat het in dat voorbeeld maar om 1 statement gaat, dan kun je optioneel de {} weglaten. Bij jou geldt de if-statement nu alleen voor de eerste statement na de if. De rest wordt sowieso uitgevoerd.

[edwinistrator]

Okay, thanks, logisch inderdaad, dus heb nu;

JavaScript:

$(document).ready(function(){
    if($("#content").hasClass("thumbs")){
        // iets
    }
    else if($("#content").hasClass("small")){
        // iets anders
    }
    else if($("#content").hasClass("big")){
        // nog iets anders
    }
});

.oisyn schreef op woensdag 20 mei 2009 @ 13:01:
Nee duh, omdat hij daar steeds een .animate() doet ipv $(). Die animate() past ie dus toe op het resultaat van de vorige expressie.

Voor dit probleem moet ik dus een oplossing vinden, want hij blijft dus vorige animatie doen.

[Icelus]

edwinistrator schreef op woensdag 20 mei 2009 @ 12:18:
Maar daar gaat het mis, jquery hover script ziet niet dat ik een div een andere class heb gegegeven en dus voert hij geen andere hover uit.

De ready-functie wordt maar eenmaal aangeroepen bij de start van de pagina. Afhankelijk van de CSS-class die als eerste gevonden wordt worden de event-handlers aan .thumbs .content_block gekoppeld. Bij de wisselen van style sheet blijven de event-handlers ongewijzigd zodat er ook geen verandering zichtbaar is.

Je kunt proberen om de event-handlers opnieuw in te stellen bij het wisselen. De code in de ready-functie zou je dan kunnen verplaatsen naar een aparte functie. Bij het starten van de pagina en style sheet-wisselingen roep je die aan.

Ook kun je een enkele hover-functie maken. Binnen die functie ga je dan pas na welke effecten nodig zijn door met hasClass na te gaan welke CSS-class aanwezig is.

[edwinistrator]

Icelus schreef op woensdag 20 mei 2009 @ 15:36:
[...]
Je kunt proberen om de event-handlers opnieuw in te stellen bij het wisselen. De code in de ready-functie zou je dan kunnen verplaatsen naar een aparte functie. Bij het starten van de pagina en style sheet-wisselingen roep je die aan.

Ook kun je een enkele hover-functie maken. Binnen die functie ga je dan pas na welke effecten nodig zijn door met hasClass na te gaan welke CSS-class aanwezig is.

Dank voor dit nieuwe inzicht. Ik heb nu inderdaad zo gefixed.

[Icelus]

edwinistrator schreef op woensdag 20 mei 2009 @ 17:15:
[...]


Dank voor dit nieuwe inzicht. Ik heb nu inderdaad zo gefixed.

Mooi

Je kunt het eventueel nog iets optimaliseren door na de 1e en 2e if in beide showXXX functies een else te zetten:

JavaScript:

if($("#content").hasClass("thumbs")){

} else
if($("#content").hasClass("big")){


} else
if($("#content").hasClass("small")){

}

Als de class ‘thumbs’ werd gevonden hoeft er nl. niet meer naar ‘big’ en ‘small’ gezocht te worden.

De find opdrachten kun je in dit geval ook schrijven als:

JavaScript:

$('.overlay',item).css({'display':'block'});

Hiermee worden alle elementen met de CSS-class overlay gezocht met het element ‘item’ als beginpunt.

[Bosmonster]

Icelus schreef op woensdag 20 mei 2009 @ 21:14:
[...]
De find opdrachten kun je in dit geval ook schrijven als:

JavaScript:

$('.overlay',item).css({'display':'block'});

Hiermee worden alle elementen met de CSS-class overlay gezocht met het element ‘item’ als beginpunt.

Dat doet find toch al, waarom zou je dat herschrijven naar een onduidelijkere syntax?