Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Zdarzenie click zmiana classy
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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
  1. <a id ="11" class="schowek" href="java script:void(0)" />Dodaj do schowka</a>


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.

  1. <a id ="11" class="delschowek" href="java script:void(0)" />Usuń ze schowka</a>
  2.  

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
  1. $(".schowek").click(function() {
  2.  
  3. var cel = document.getElementById($(this).attr("id"));
  4. cel.innerHTML = "Usuń ze schowka";
  5. $(this).removeClass("schowek");
  6. $(this).addClass("delschowek");
  7.  
  8. });


  1. $(".delschowek").click(function() {
  2. var cel = document.getElementById($(this).attr("id"));
  3. cel.innerHTML = "Dodaj do schowka";
  4. $(this).removeClass("delschowek");
  5. $(this).addClass("schowek");
  6.  
  7. });
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.