Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana klasy elementu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Włodzimierz
30.11.2013, 20:43:08
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.
com
30.11.2013, 21:09:08
http://www.w3schools.com/jsref/met_namedno...etnameditem.asp
Włodzimierz
30.11.2013, 21:20:34
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)?
Crozin
30.11.2013, 21:24:39
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.
Włodzimierz
30.11.2013, 21:34:23
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.
com
30.11.2013, 21:38:39
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
Crozin
30.11.2013, 21:48:04
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.
com
30.11.2013, 21:56:03
@up zgadzam się, ale ta średnia krajowa na sierpień 2010 to mnie rozbroiła laugh.gif
Włodzimierz
1.12.2013, 13:07:26
@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.
PrinceOfPersia
1.12.2013, 13:49:10
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)
Włodzimierz
1.12.2013, 14:17:24
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.
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.