Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Zmiana klasy elementu
Włodzimierz
post 30.11.2013, 20:43:08
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.11.2013

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

Witam.
Tworzę stronę wizytówkę swojej małej firmy, i potrzebuję wykonać rozwijane menu po kliknięciu na element.
Moim celem jest wykorzystanie jak najkrótszego kodu, czyli importowanie biblioteki nie wchodzi w grę.

Mniej więcej chce uzyskać taki efekt:
[HTML] pobierz, plaintext 
  1. <button>Menu</button>
  2. <div id="zm" class="klasa1">Linki<div>
[HTML] pobierz, plaintext

a po kliknięciu na button:
[HTML] pobierz, plaintext 
  1. <button>Menu</button>
  2. <div id="zm" class="klasa2">Linki</div>
[HTML] pobierz, plaintext


Szukając po internecie natrafiłem na coś takiego:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script>
  5.   function changeColor(newColor) {
  6.     var elem = document.getElementById("para1");
  7.     elem.style.color = newColor;
  8.   }
  9.   </script>
  10. </head>
  11. <body>
  12.   <p id="para1" style="color: red;">Some text here</p>
  13.   <button onclick="changeColor('blue');">blue</button>
  14.   <button onclick="changeColor('red');">red</button>
  15. </body>
  16. </html>
[HTML] pobierz, plaintext


Powyższy kod działa, lecz jedynie zmienia kolor, i potrzebuje dwóch buttonów. Próbowałem go zmodyfikować, lecz nic z tego nie wychodziło.

Proszę o pomoc smile.gif Jeżeli będzie trzeba chętnie za jako taką pomoc zapłacę.
Pozdrawiam.
Go to the top of the page
+Quote Post
com
post 30.11.2013, 21:09:08
Post #2





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

http://www.w3schools.com/jsref/met_namedno...etnameditem.asp
Go to the top of the page
+Quote Post
Włodzimierz
post 30.11.2013, 21:20:34
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.11.2013

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

Dzięki działa, ale niestety w jedną stronę.
Co zrobić, by po ponownym kliknięciu na ten button przywrócił on poprzednią klasę (bym mógł zwinąć menu)?

Ten post edytował Włodzimierz 30.11.2013, 21:20:59
Go to the top of the page
+Quote Post
Crozin
post 30.11.2013, 21:24:39
Post #4





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

Cytat
Moim celem jest wykorzystanie jak najkrótszego kodu, czyli importowanie biblioteki nie wchodzi w grę.
Skąd taki dziwny cel?

[JAVASCRIPT] pobierz, plaintext 
  1. (function(window) {
  2.     "use strict";
  3.  
  4.     var element = window.document.getElementById("divElement");
  5.     var trigger = window.document.getElementById("buttonElement");
  6.  
  7.     trigger.addEventListener("click", function() {
  8.         element.className = (element.className === "klasa1" ? "klasa2" : "klasa1");
  9.     }, false);
  10. })(window)
[JAVASCRIPT] pobierz, plaintext
Powyższy kod:
1. Nie zadziała na wszystkich przeglądarkach.
2. Nie poradzi sobie w przypadku, gdy element będzie miał jeszcze jakieś dodatkowe klasy.

Ten post edytował Crozin 30.11.2013, 21:25:13
Go to the top of the page
+Quote Post
Włodzimierz
post 30.11.2013, 21:34:23
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.11.2013

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

Nie chcę importować biblioteki ze względu na czas ładowania strony (no może te 80kB to nie wiele, ale jednak wink.gif ), a nie umiem tego cachować.

Znalazłem pewien temat, gdzie opisane jest jak to zrobić w czystym JS, ale instrukcje w odpowiedziach są podzielone, i kompletnie nie wiem jak je złożyć w całość:
http://stackoverflow.com/questions/195951/...with-javascript

@Crozin również nie wiem jak użyć Twojego kodu.
Go to the top of the page
+Quote Post
com
post 30.11.2013, 21:38:39
Post #6





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

up dodaj sobie spr czy wywołana została już funkcja np zrób to tak:
[JAVASCRIPT] pobierz, plaintext 
  1. var t = 0;
  2. function myFunction()
  3. {
  4. if(t == 0){
  5. var h=document.getElementsByTagName("H1")[0];
  6. var typ=document.createAttribute("class");
  7. typ.nodeValue="democlass1";
  8. h.attributes.setNamedItem(typ);
  9. t = 1;
  10. }
  11. else
  12. {
  13. var h=document.getElementsByTagName("H1")[0];
  14. var typ=document.createAttribute("class");
  15. typ.nodeValue="democlass";
  16. h.attributes.setNamedItem(typ);
  17. t = 0;
  18. }
  19. }
[JAVASCRIPT] pobierz, plaintext


Ten post edytował com 30.11.2013, 21:38:53
Go to the top of the page
+Quote Post
Crozin
post 30.11.2013, 21:48:04
Post #7





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

Cytat
Nie chcę importować biblioteki ze względu na czas ładowania strony (no może te 80kB to nie wiele, ale jednak wink.gif ), a nie umiem tego cachować.
Serio... 80 KiB? Przecież pierwszy lepszy obrazek na stronie będzie tyle zajmować. Zresztą i tak jest to pobierane tylko raz. A jak podlinkujesz z CDN-a (jQuery'owski, Google'owski), bardzo prawdopodobne, że będzie to już zcacheowane w przeglądarce użytkownika nim w ogóle otworzy Twoją stronę.

Założyłem, że chodzi Ci o jQuery (80 KiB), a masz jeszcze całą masę innych bibliotek lżejszych pod względem objętości: http://en.wikipedia.org/wiki/Comparison_of...ript_frameworks

PS. Jeżeli uwzględnić poza minimalizacją kodu jego kompresję (gzip) będzie to zapewne 40 - 60 KiB danych jedynie przy pierwszym pobraniu. W porównaniu do średniej krajowej, która niby ma wynosić 24 mbps (http://cdn.infographicsarchive.com/wp-cont...d-and-costs.jpg) to na prawdę zerowe obciążenie.

Ten post edytował Crozin 30.11.2013, 21:52:54
Go to the top of the page
+Quote Post
com
post 30.11.2013, 21:56:03
Post #8





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

@up zgadzam się, ale ta średnia krajowa na sierpień 2010 to mnie rozbroiła laugh.gif

Ten post edytował com 30.11.2013, 21:56:17
Go to the top of the page
+Quote Post
Włodzimierz
post 1.12.2013, 13:07:26
Post #9





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.11.2013

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

@com eureka

@Crozin o tym, że jQuery jest cachowane automatycznie nie wiedziałem. W takim razie zmienia to moje podejście do sprawy- biblioteka jQ+ kilka linijek kodu będzie się szybciej wczytywać niż kilkanaście linijek w czystym JS smile.gif

------

Jednak chyba użyję czystego JS. Wyczytałem, że jQ trzeba umieć cachować.

Więc mam coś takiego:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script>
  6. function myFunction()
  7. {
  8. var h=document.getElementsByTagName("H1")[0];
  9. var typ=document.createAttribute("class");
  10. typ.nodeValue="democlass";
  11. h.attributes.setNamedItem(typ);
  12. }
  13.  
  14. var t = 0;
  15. function myFunction()
  16. {
  17. if(t == 0){
  18. var h=document.getElementsByTagName("H1")[0];
  19. var typ=document.createAttribute("class");
  20. typ.nodeValue="democlass1";
  21. h.attributes.setNamedItem(typ);
  22. t = 1;
  23. }
  24. else
  25. {
  26. var h=document.getElementsByTagName("H1")[0];
  27. var typ=document.createAttribute("class");
  28. typ.nodeValue="democlass";
  29. h.attributes.setNamedItem(typ);
  30. t = 0;
  31. }
  32. }
  33. </script>
  34.  
  35. <style>.democlass{display:none;} .democlass1{display:block;}</style>
  36. </head>
  37. <body>
  38.  
  39. <h1 id="h1" class="democlass">Hello World</h1>
  40. <button onclick="myFunction()">Menu</button>
  41.  
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


Problem w tym, że skrypt szuka znaczników H1, a nie np. div'a z określonym ID. Próbowałem zamienić 
[HTML] pobierz, plaintext 
  1. getElementsByTagName
[HTML] pobierz, plaintext
na 
[HTML] pobierz, plaintext 
  1. getElementById
[HTML] pobierz, plaintext
, ale niestety nie działa.
Go to the top of the page
+Quote Post
PrinceOfPersia
post 1.12.2013, 13:49:10
Post #10





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

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

Musi działać, pewnie nie umiesz tego używać wink.gif (wrzuć to, co ci nie działa)

Btw:
Cytat
var h=document.getElementsByTagName("H1")[0];
var typ=document.createAttribute("class");
(...)
var h=document.getElementsByTagName("H1")[0];
var typ=document.createAttribute("class");

Copy-paste programming nie jest zbyt dobra technika, duplikujesz kod niepotrzebnie pisząc 2razy to samo.. (Lepiej wywalić duplikatu i przenieść kod przed if'a

EDIT:

A do podmiany klasy używa sie zmiennej className, nie musisz tworzyć ręcznie żadnych atrybutów

Spróbuj tak:

document.getElementById('identyfikator-elementu').className = 'klasa1 klasa2 klasa3';
(Do className możesz przypisać kilka klas oddzielonych stacjami)

Ten post edytował PrinceOfPersia 1.12.2013, 13:55:51


--------------------
Live demo mojej wtyczki do Atoma (lepsza nawigacja po plikach)
Go to the top of the page
+Quote Post
Włodzimierz
post 1.12.2013, 14:17:24
Post #11





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.11.2013

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

Nie wiem, czy Cię dobrze zrozumiałem (nie działa): [edit: działa zapomniałem zamknąć- "}", lecz jedynie dodaje klasę"klasa2" do class="", i działa w jedną stronę]
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script>
  6. function myFunction()
  7. {
  8. document.getElementById('nav').className = 'klasa1 klasa2';
  9. }
  10. </script>
  11.  
  12. <style>.klasa1{display: none;} .klasa2{display: block;}</style>
  13. </head>
  14. <body>
  15.  
  16. <div id="nav" class="klasa1">Linki</div>
  17. <button onclick="myFunction()">menu</button>
  18.  
  19. </body>
  20. </html>
[HTML] pobierz, plaintext




Cytat
Musi działać, pewnie nie umiesz tego używać wink.gif (wrzuć to, co ci nie działa)

JS to dla mnie czarna magia wink.gif Kod który nie działa:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script>
  6. function myFunction()
  7. {
  8. var h=document.getElementById("nav")[0];
  9. var typ=document.createAttribute("class");
  10. typ.nodeValue="democlass";
  11. h.attributes.setNamedItem(typ);
  12. }
  13.  
  14. var t = 0;
  15. function myFunction()
  16. {
  17. if(t == 0){
  18. var h=document.getElementById("nav")[0];
  19. var typ=document.createAttribute("class");
  20. typ.nodeValue="democlass1";
  21. h.attributes.setNamedItem(typ);
  22. t = 1;
  23. }
  24. else
  25. {
  26. var h=document.getElementById("nav")[0];
  27. var typ=document.createAttribute("class");
  28. typ.nodeValue="democlass";
  29. h.attributes.setNamedItem(typ);
  30. t = 0;
  31. }
  32. }
  33. </script>
  34.  
  35. <style>.democlass{display: none;} .democlass1{display: block;}</style>
  36.  
  37. </head>
  38. <body>
  39.  
  40. <div id="nav" class="democlass">Linki</div>
  41. <button onclick="myFunction()">menu</button>
  42.  
  43. </body>
  44. </html>
[HTML] pobierz, plaintext



Cytat
Lepiej wywalić duplikatu i przenieść kod przed if'a

Nie bardzo wiem o co chodzi.

Ten post edytował Włodzimierz 1.12.2013, 14:23:45
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 15.05.2025 - 09:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn