[JS] Zdarzenie click zmiana classy Opcje

[markus29]

Witam
Robię schowek i mam problem z usuwaniem elementów ze schowka.
Każdy element ma tą samą klasę class="schowek" lub class="delschowek"
domyślnie jest ustawiona classa na schowek.

Każdy element ma odnosnik "a" do dodawania elementu do schowka, odnośnik wygląda tak

[HTML] pobierz, plaintext 
<a id ="11" class="schowek" href="java script:void(0)"  />Dodaj do schowka</a>
[HTML] pobierz, plaintext 

Gdy kliknę w/w odnośnik zmienia mi się classa na "del schowek" i text z "Dodaj do schowka" na "Usuń ze schowka",
więc odnośnik wygląda tak.

[HTML] pobierz, plaintext 
<a id ="11" class="delschowek" href="java script:void(0)"  />Usuń ze schowka</a>                                        
 
[HTML] pobierz, plaintext 

Jeśli kliknę na Dodaj do schowka to wszystko działa, zmienia odnośnik na Usuń ze schowka i ustawia klasę na "delschowek" ale jeśli kliknę na ten sam odnośnik który zmienił się na Usuń ze schowka to już nie zmienia classy na "schowek". Wygląda tak jakby pomimo ustawionej classy na delschowek on wykonuje funkcje przeznaczona dla classy schowek.
Kod

[HTML] pobierz, plaintext 
$(".schowek").click(function() {
 
  var cel = document.getElementById($(this).attr("id"));
  cel.innerHTML = "Usuń ze schowka";
  $(this).removeClass("schowek");
  $(this).addClass("delschowek");
 
});
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
$(".delschowek").click(function() {
var cel = document.getElementById($(this).attr("id")); 
   cel.innerHTML = "Dodaj do schowka";
   $(this).removeClass("delschowek");
   $(this).addClass("schowek");  
 
});
[HTML] pobierz, plaintext 

Ten post edytował markus29 7.03.2013, 14:19:10

[kamil4u]

Bo to tak nie działa.

W przypadku przypisania zdarzenia przypisujesz je konkretnemu elementowi, a nie konkretnej klasie. Inaczej mówiąc przy uruchomieniu tego skryptu "szukasz" elementów o danej klasie i tym elementom przypisujesz funkcję, która jest tam nijako na stałe, czyli zmieniając klasę nie zmieniasz funkcji.

Rozwiązanie jest proste. Trzeba wraz z klasą zmieniać też funkcję w zdarzeniu. W czystym JS zrobiłbyś to tak, że dopisałbyś:

Kod

costam.onclick = function(){
this.nazwaKlasy = "nowa Klasa";
this.onclick = nowaFunkcja;
}

Ale, że Ty korzystasz z jQuery to masz 2 wyjścia:
1. Tak samo jak w JS, czyli dopisać:

Kod

$( this ).click( nowaFunkcja );

2. Kazać jQuery zrobić to za Ciebie, czyli użyć .... no właśnie czegoś tam. Kiedyś było to chyba .live ,a teraz używa się bodajże samego .on. Jest to lepsze rozwiązanie od tego pierwszego. Jednak mało używam jQuery, więc musisz doczytać samemu w dokumentacji na ten temat,

Pozdrawiam

[markus29]

Dzięki Mistrzu działa elegancko z .on