Status van listitems met jQuery bind() en unbind()

[WebTwister]

Hallo Tweakers,

ik heb een stukje javascript gemaakt die met behulp van jQuery de status van een listitem weergeeft.
er zijn drie stadia Normaal, Hover, Actief. deze worden met behulp van een sprite getoond.

in principe werkt het, alleen is er nog één dingetje wat ik niet voor elkaar krijg, en dat is het volgende.

als een item actief is unbind() ik de mouseover en mouseout() zodat de status actief blijft van het item,
vervolgens bind ik een click event om het geheel in de oude staat terug te brengen.
Als ik dus klik op een actief item om het inactief te maken, werkt dit wel maar vervolgens werken op dit item de mouseover, mouseout en click niet meer om eventueel wederom te activeren. dit lijkt mij een scope probleem.

ik heb uiteraard al gezocht met google en hier op tweakers naar jquery scope, jquery bind, unbind etc etc, maar de resultaten zijn het allemaal net niet. Daarom aan jullie de vraag om mij een schop in de goede richting te geven of misschien zelfs wel een oplossing

dit is de code:

code:

        // mouseover
        $('li.pai-normal').mouseover( function (){
            $(this).css("background-position","0px -18px");        
        });
        
        // back to normal
        $('li.pai-normal').mouseout( function (){
            $(this).css("background-position","0px 0px");        
        });
            

        // active
        $('.pai-normal').click(function(){
            $(this).css("background-position","0px -36px");
            $(this).removeClass("pai-normal");
            $(this).addClass("pai-active");
            $(this).unbind('mouseover');
            $(this).unbind('mouseout');
            $(this).bind("click", function(){
                $(this).css("background-position","0px 0px");
                $(this).removeClass("pai-active");
                $(this).addClass("pai-normal");
                // hier moet nog iets komen waardoor de mouseover / mouseout en click weer gaan werken nadat het is uitgezet, 
                // het volgende werkt niet:
                // $(this).bind('mouseover');
                // $(this).bind('mouseout');
                // $(this).bind('click');
            });             
        });

[Niemand_Anders]

ik zelf gebruik altijd de functionaliteit van jquery zelf ipv bind/unbind.

JavaScript:

$(selection).
  .addClass("ui-state-default") 
  .hover(
     function() { $(this).addClass("ui-state-hover"); },
     function() { $(this).removeClass("ui-state-hover"); }
  )
  .focus( function() { $(this).addClass("ui-state-active"); })
  .blur ( function() { $(this).removeClass("ui-state-active"); })
;

[Bosmonster]

Mjah dat lost niks op natuurlijk als het gaat om het unbinden van events.

Kun je overigens niet gewoon de events laten bestaan en in de aan te roepen handler controleren of iets wel of niet gedaan moet worden aan de hand van de status van het element?

Je kunt deze status bijvoorbeeld eenvoudig opslaan via de data-methode of door een extra dummy class mee te geven.

Je levert ietsje in aan performance, maar scheelt je een hoop problemen (en daar hou ik altijd wel van).

[ Voor 18% gewijzigd door Bosmonster op 29-05-2009 13:48 ]

[WebTwister]

Bosmonster schreef op vrijdag 29 mei 2009 @ 13:47:
Je kunt deze status bijvoorbeeld eenvoudig opslaan via de data-methode of door een extra dummy class mee te geven.

Ja daar zat ik in eerste instantie ook aan te denken, maar kreeg dat ook niet zo snel voor elkaar. Maar na een een korte pauze + een nieuwe blik + jouw advies ben ik nu tot een werkend geheel gekomen, vrij basic maar wel effectief. 'k heb het als volgt opgelost (tips/verbeteringen zijn uiteraard altijd welkom)

code:

        // mouseover
        $('li.pai-normal').mouseover( function (){
            if($(this).attr('class') == 'pai-normal'){
                $(this).css("background-position","0px -18px"); 
            }       
        });
        
        //back to normal
        $('li.pai-normal').mouseout( function (){
            if($(this).attr('class') == 'pai-normal'){
                $(this).css("background-position","0px 0px");
            }        
        });

        //active
        $('.pai-normal').click(function(){

            if($(this).attr('class') == 'pai-normal'){
                $(this).css("background-position","0px -36px");
                $(this).addClass("pai-active");
                $(this).removeClass("pai-normal");
            } else if($(this).attr('class') == 'pai-active'){
                $(this).css("background-position","0px 0px");
                $(this).removeClass("pai-active");
                $(this).addClass("pai-normal");             
            }     
        });

[Bosmonster]

Kleine verbetering:

ipv attr('class'), hasClass() gebruiken. Die werkt ook als er meerdere classes op een element aanwezig zijn.

Verder prima toch, simpeler is vaak beter

[ Voor 14% gewijzigd door Bosmonster op 30-05-2009 01:47 ]

[Michali]

Bosmonster schreef op vrijdag 29 mei 2009 @ 13:47:
Je levert ietsje in aan performance, maar scheelt je een hoop problemen (en daar hou ik altijd wel van).

Denk je? Het binden en unbinden lijkt me anders ook vrij duur.


Voor de TS: Je voegt nu wel een class toe, maar je doet er volgens mij nog niets mee. De bedoeling is om die background-position regel aan de juiste class toe te voegen, in een CSS stylesheet. Een best practice is om zo min mogelijk directe (inline) CSS regels te koppelen aan element, en zoveel mogelijk met ID's en classes te werken.

Uitzonderingen zijn positionering en afmeting regels (left, top, margin, width, height etc.) als je de waarde daarvan berekent. Dat kun je van te voren soms niet weten.

[Bosmonster]

Michali schreef op zaterdag 30 mei 2009 @ 03:33:
[...]

Denk je? Het binden en unbinden lijkt me anders ook vrij duur.

Mjah, maar dat is maar eenmalig bij een click actie als ik het goed begrijp. Deze oplossing vereist bij iedere mouseover en mouseout een controle van de class. Ook redelijk verwaarloosbaar, maar toch