Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]Przełącznik wyglądu elementu
Forum PHP.pl > Forum > Przedszkole
corvus606
14.12.2011, 04:35:13
Problem - potrzebuję skryptu który po naciśnięciu na diva przypisywał mu odpowiednio zdefiniowane wcześniej cechy w css.
Myślałem, żeby zrobić to w jQuery, skryptem który zmieniałby klasę div'a. I wszystko byłoby pięknie, gdyby nie to, że chcę aby istniała możliwość powrotu do pierwotnej klasy, próbowałem w ten sposób:

Skrypt:
[HTML] pobierz, plaintext 
  1. $(".radio").click(function () { 
  2. $("div").removeClass( "radio" );
  3. $("div").addClass("radio1");
  4. });
  5.  
  6.  
  7. $(".radio1").click(function () { 
  8. $("div").removeClass( "radio1" );
  9. $("div").addClass("radio");
  10. });
[HTML] pobierz, plaintext

Html+css:
[HTML] pobierz, plaintext 
  1. <style>
  2. div.radio{
  3. color:green;
  4. }
  5. div.radio1{
  6. color:red;
  7. }
  8. </style>
  9. <body>
  10. <div class="radio"><span>change me!</span></div>
  11. </body>
[HTML] pobierz, plaintext



Ale obawiam się, że zdecydowanie nie jest to dobra droga...
CuteOne
14.12.2011, 06:08:13 
[JAVASCRIPT] pobierz, plaintext 
  1. //po kliknięciu sprawdzasz warunek
  2.  
  3. if(obj.hasClass('klasa1')) 
  4.    zmień na "klasa2"
  5. else
  6.    zmien na "klasa1"
[JAVASCRIPT] pobierz, plaintext
corvus606
14.12.2011, 18:07:23
Próbuję w ten sposób:
[HTML] pobierz, plaintext 
  1. $("#mydiv").click(function () { 
  2.  
  3. if ($('#mydiv').hasClass('radio')) {
  4.  
  5. 		$("div").removeClass( "radio" );
  6. 		$("div").addClass("radio1");
  7. 		};
  8.  
  9. else {
  10.  
  11. 		$("div").removeClass( "radio1" );
  12. 		$("div").addClass("radio");
  13. 		};
  14.  
  15. });
[HTML] pobierz, plaintext

Ale chyba dalej robię coś nie tak - brak jakiejkolwiek reakcji.
Próbowałem też tak:
[HTML] pobierz, plaintext 
  1.  
  2. if ($('#mydiv').hasClass('radio')) {
  3.     	$(".radio").click(function () { 
  4. 		$("div").removeClass( "radio" );
  5. 		$("div").addClass("radio1");
  6. 		});
  7.  
  8. }
  9. else {
  10.     	$(".radio").click(function () { 
  11. 		$("div").removeClass( "radio1" );
  12. 		$("div").addClass("radio");
  13. 		});
  14.  
  15. }
[HTML] pobierz, plaintext

Ale również nie działa, podobnie jak pierwotnie - w jedną stronę się zmienia, w drugą nie.
W obu przypadkach określam element tak:
[HTML] pobierz, plaintext 
  1. <div class="radio" id="mydiv"><span>change me!</span></div>
[HTML] pobierz, plaintext
Shili
14.12.2011, 18:10:13
Jest taka specjalna funkcja.
http://api.jquery.com/toggleClass/

Szybsza, bardziej przyjemna, powinna dać radę smile.gif

Btw, poprzedni kod

[HTML] pobierz, plaintext 
  1. $("#mydiv").click(function () { 
  2.  
  3. if ($(this).hasClass('radio')) { // nie operujesz non-stop na dom - fajne słówko - this
  4.  
  5. 		$(this).removeClass( "radio" );
  6. 		$(this).addClass("radio1");
  7. 		}
  8.  
  9. else {
  10.  
  11. 		$(this).removeClass( "radio1" );
  12. 		$(this).addClass("radio");
  13. 		};
  14.  
  15. });
[HTML] pobierz, plaintext


@edit
Btw, mam nadzieję, że wywołujesz tą funkcję w $(document).ready(), albo kod js jest umieszczony PO kodzie diva?
corvus606
14.12.2011, 18:30:38
jest po divie, faktycznie zmienię na $(document).ready()
Działa super, dziękuję!
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.