Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery]Przełącznik wyglądu elementu
corvus606
post
Post #1





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 12.11.2011

Ostrzeżenie: (0%)
-----

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...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
CuteOne
post
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
----- 

[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


Ten post edytował CuteOne 14.12.2011, 06:08:37
Go to the top of the page
+Quote Post
corvus606
post
Post #3





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 12.11.2011

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Shili
post
Post #4





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----

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?

Ten post edytował Shili 14.12.2011, 18:19:00
Go to the top of the page
+Quote Post
corvus606
post
Post #5





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 12.11.2011

Ostrzeżenie: (0%)
-----

jest po divie, faktycznie zmienię na $(document).ready()
Działa super, dziękuję!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 23:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn