Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana klasy w jQuery
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
forte94
Witam, tworzę menu które podświetla obrazki z danej kategorii, którą zaznaczymy. Menu po kliknięciu na dany przycisk powinno podświetlić (opacity:1) obrazki z kategorii przycisku. Natomiast po ponownym kliknięciu na przycisk, powinno ukryć obrazki (opacity:0.2). Menu jest już prawie gotowe, pojawia się problem prz "wyciskaniu" przycisku.

Przykładowy przycisk wygląda tak:

  1. <div class="kategoria1 przycisk">Nazwa kategorii</div>



Natomiast przykładowy skrypt do przycisku wygląda tak:

  1. $(".kategoria1").click(function () {
  2.  
  3. $(".kategoria2").css("opacity","0.2");
  4. $(".kategoria3").css("opacity","0.2");
  5. $(".kategoria4").css("opacity","0.2");
  6. $(".kategoria5").css("opacity","0.2");
  7. $(".kategoria6").css("opacity","0.2");
  8.  
  9. $(".kategoria1").css("opacity","1");
  10. $(".kategoria1").addClass("wcisniety1");
  11. $(".kategoria1").removeClass("kategoria1");
  12. });


A przykładowy skrypt do wciśniętego przycisku wygląda tak:
  1.  
  2. $(".wcisniety1").live('click',function(){
  3. $(".kategoria1").css("opacity","1");
  4. $(".kategoria2").css("opacity","1");
  5. $(".kategoria3").css("opacity","1");
  6. $(".kategoria4").css("opacity","1");
  7. $(".kategoria5").css("opacity","1");
  8. $(".kategoria6").css("opacity","1");
  9. $(".wcisniety1").addClass("kategoria1");
  10. $(".wcisniety1").removeClass("wcisniety1");
  11. });


Problem polega na tym, że skrypty wykonują się jeden po drugim, a więc zawsze wracają do stanu z przed kliknięcia. Po prostu skrypt pierwszy zmienia nazwę klasy, a skrypt drugi jest przypisany dla tej klasy i wykonuje się. Przy zamianie kolejności skryptów w pliku js dzieje się to samo. Jak sobie z tym poradzić?
radziopoke
Mam pytanie czy tworzysz jakieś elementy dynamicznie że używasz live. Bo jeżeli nie to nie jest on tu potrzebny i wtedy można to zrobić tak
  1. $(".kategoria1").click(function () {
  2. if($(".kategoria1").css("opacity")=="0.2")
  3. {
  4. $(".kategoria2").css("opacity","0.2");
  5. $(".kategoria3").css("opacity","0.2");
  6. $(".kategoria4").css("opacity","0.2");
  7. $(".kategoria5").css("opacity","0.2");
  8. $(".kategoria6").css("opacity","0.2");
  9. $(".kategoria1").css("opacity","1");
  10. }
  11. else
  12. {
  13. $(".kategoria1").css("opacity","0.2");
  14. }
  15. });

i takie jedno pytanie dlaczego po kliknięciu wciśniętego przycisku w twoim skrypcie resztę przycisków zmieniasz opacity na 1
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.