[javascript] jQuery problem z eventem .click


(pain3hp) #1
Strona główna
Kontakt[/code]


Mam na stronie takie oto dwa linki. Chodzi o to że na początku chcę odrazu po wczytaniu strony nadać im opacity 0.6, jak narazie mi się udaje takim oto kodem

[code]$(document).ready(function(){ $("a.test").fadeTo(600, 0.6);
Działa, po wczytaniu strony linki ładnie ciemnieją. Efekt ma być taki że gdy kliknę w tego linka to ma się zrobić opacity na "1" czyli ma wrocic do swojego stylu. Potem jak go znowu kliknę to znowu ma być na 0.6 i tak w kółko. Oczywiście to ma działać na każdym linku z osobna tzn jak klikam w "strona główna" to tylko ona ma się zmienić.... a robię to tak:

$("a.test").click(function(){

$(this).removeClass("test");

$(this).addClass("sg");

$("a.sg").fadeTo(700, 1);

 });

Jestem cienki w JS i odrazu chce zapytać 1. co oznacza znak dolara ?? OK, do tego momenu działa i jak widać następuje zmiana klasy z "test" na "sg" i opacity wraca na 1 a poniżej mam taki zapis:

$("a.sg").click(function(){

$(this).removeClass("sg");

$(this).addClass("test");

$("a.test").fadeTo(700, 0.6);

});

Jak widać ma być znowu zamiana klasy i powrót na opacity 0.6 Jednak to już nie działa.... :confused:

Bardzo mi na tym zależy :frowning:


(Fiołek) #2

$ w JS nie oznacza nic. Może być wszystkim. jQuery przypisuje sobie do niego swoją klasę i dlatego da się go tak używać.

jQuery() pobiera wszystkie elementy pasujące do podanego ciągu znaków, ale te elementy MUSZĄ być już w kodzie HTML(czy to dodane przez JS, czy normalnie napisane). Przypisanie zdarzenia onclick do "a.sg" nie działa bo w tym momencie NIE MA jeszcze takich elementów.

Zamiast bawić się w dwa różne zdarzenia można to rozwiązać jednym zdarzeniem i sprawdzać w nim aktualną klasę.

if($(this).hasClass("test"))

{ //Klasa test - fade to 1.

   $(this).removeClass("test");

   $(this).addClass("sg");

   $(this).fadeTo(700, 1);

}

else

{ //Klasa sg. fade to 0.6

   $(this).removeClass("sg");

   $(this).addClass("test");

   $(this).fadeTo(700, 0.6);

}

Kod pisany z palca, mogą być błędy.


(pain3hp) #3

Dzięki o to mi chodziło


(Kubarek) #4

Zamiast

$(this).removeClass("sg");

   $(this).addClass("test");

   $(this).fadeTo(700, 0.6);

daj

$(this).removeClass("sg").addClass("test").fadeTo(700, 0.6);

:slight_smile:


(Fiołek) #5

Jak kto lubi, osobiście wolę tak jak napisałem :wink: