Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript]Zwracanie wartości div'a.
Forum PHP.pl > Forum > Przedszkole
Salur
Witam, proszę o pomoc w wykonaniu czegoś takiego:

http://scr.hu/7bwz/arzux

Sa 2 divy, w jednym będą zdjecia, po kliknieciu np. na zdjecie pierwsze w drugim divie pokaże się to zdjęcie z dodatkowym opisem poniżej.

Bardzo proszę o pomoc.
kafowi
Nie podałeś zbyt wielu szczegółów jak chociażby gdzie trzymasz ten opis (najlepiej jakby np. był w alt obrazka).
Zaliczenia?

Tutaj przykład bez alt:

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>JS Bin</title>
  4. </head>
  5. <div id="zdjecia">
  6. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  7. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  8. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  9. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  10. </div>
  11. <div id="opis"></div>
  12. document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function()
  13. {
  14. var opis = "Opis do zdjęcia numer 1";
  15. document.getElementById("opis").innerHTML = opis;
  16. }
  17.  
  18. document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function()
  19. {
  20. var opis = "Opis do zdjęcia numer 2";
  21. document.getElementById("opis").innerHTML = opis;
  22. }
  23.  
  24. document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function()
  25. {
  26. var opis = "Opis do zdjęcia numer 3";
  27. document.getElementById("opis").innerHTML = opis;
  28. }
  29.  
  30. document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function()
  31. {
  32. var opis = "Opis do zdjęcia numer 4";
  33. document.getElementById("opis").innerHTML = opis;
  34. }
  35. </script>
  36. </body>
  37. </html>
Salur
Chodzi mi aby ten obrazek którego kliknąłem pokazał się obok w divie i pod nim opis.
kafowi
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>JS Bin</title>
  4. </head>
  5. <div id="zdjecia">
  6. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  7. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  8. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  9. <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  10. </div>
  11. <div id="opis"></div>
  12. document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function()
  13. {
  14. var opis = "Opis do zdjęcia numer 1";
  15. document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  16. }
  17.  
  18. document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function()
  19. {
  20. var opis = "Opis do zdjęcia numer 2";
  21. document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  22. }
  23.  
  24. document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function()
  25. {
  26. var opis = "Opis do zdjęcia numer 3";
  27. document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  28. }
  29.  
  30. document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function()
  31. {
  32. var opis = "Opis do zdjęcia numer 4";
  33. document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  34. }
  35. </script>
  36. </body>
  37. </html>
Salur
Dziękuję bardzo.
PrinceOfPersia
No tak, tylko ten kod nawet jeśli działa, to jest wręcz fatalny.
[JAVASCRIPT] pobierz, plaintext
  1. document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function()
  2. {
  3. var opis = "Opis do zdjęcia numer 1";
  4. document.getElementById("opis").innerHTML = opis;
  5. }
  6.  
  7. document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function()
  8. {
  9. var opis = "Opis do zdjęcia numer 2";
  10. document.getElementById("opis").innerHTML = opis;
  11. }
  12.  
  13. document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function()
  14. {
  15. var opis = "Opis do zdjęcia numer 3";
  16. document.getElementById("opis").innerHTML = opis;
  17. }
  18.  
  19. document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function()
  20. {
  21. var opis = "Opis do zdjęcia numer 4";
  22. document.getElementById("opis").innerHTML = opis;
  23. }
[JAVASCRIPT] pobierz, plaintext

Wiesz, że napisałeś 4 razy to samo? Rozumiem, że łatwiej jest nacisnąć Ctrl+C a potem trzy razy Ctrl+V niż napisać z sensem - ale uwierz, że ten kod będzie później trudny w utrzymaniu. Za każdym razem kiedy trzeba będzie zmienić jedną rzecz, trzeba będzie ją zmienić w 4 miejscach. Jeśli będzie trzeba zmienić trzy rzeczy (albo dodać nowe 3 ficzery), to trzeba będzie pisać 12 razy (bo 3 ficzery * 4 powtórzenia) to samo. A co jesli obrazkow bedzie 50? Bedziesz 50 razy kopiowal to samo?

Pisanie takiego kodu ma uzasadnienie tylko wtedy, kiedy chcemy coś na szybko sprawdzić i na 90% nie będziemy zaglądać więcej do tego skryptu.

Jeśli Salurowi chodziło o taki "jednostrzałowiec" to okej...

Ale jak to ma być coś, co potem ma trwać i być łatwe do zmienienia to juz predzej coś takiego jak to:
http://jsfiddle.net/sa91ktsp/2/

Zresztą... jakby się zastanowić to napisanie z sensem wcale nie zajmuje więcej czasu niż kopiuj-wklejka. Nie mam pojęcia skąd ta moda na copy-pastę.
kafowi
Cytat(PrinceOfPersia @ 6.07.2015, 12:39:15 ) *
Pisanie takiego kodu ma uzasadnienie tylko wtedy, kiedy chcemy coś na szybko sprawdzić i na 90% nie będziemy zaglądać więcej do tego skryptu.
Jeśli Salurowi chodziło o taki "jednostrzałowiec" to okej...

Założyłem, że to na zaliczenie, a one rządzą się swoimi prawami, więc w sumie to twierdzenie jest trafne.

Cytat
Wiesz, że napisałeś 4 razy to samo? Rozumiem, że łatwiej jest nacisnąć Ctrl+C a potem trzy razy Ctrl+V niż napisać z sensem - ale uwierz, że ten kod będzie później trudny w utrzymaniu.

Ja rozumiem, że kod będzie trudny w utrzymaniu i napisałem to samo, odpowiedzi udzieliłem w cytacie pierwszym.
Pyton_000
Co z tego? Jak już pomagamy to pomagajmy tak żeby przynajmniej próbować uczyć poprawnych zachowań.
Ten kod można było rozmuchać xxx razy bardziej i też by działał. Co z tego?

I zakładanie czegoś to fatalne podejście.
Lepiej nie zakładać, dopytać niż potem pisać bzdury typu użyjmy mysql_ bo tak uczą we wszystkich tutkach.
prz3kus
Cytat(Pyton_000 @ 6.07.2015, 13:29:22 ) *
Co z tego? Jak już pomagamy to pomagajmy tak żeby przynajmniej próbować uczyć poprawnych zachowań.
Ten kod można było rozmuchać xxx razy bardziej i też by działał. Co z tego?

I zakładanie czegoś to fatalne podejście.
Lepiej nie zakładać, dopytać niż potem pisać bzdury typu użyjmy mysql_ bo tak uczą we wszystkich tutkach.

Trochę się czepiacie na siłe, ktoś będzie upierdliwy to powie, że to http://jsfiddle.net/sa91ktsp/2/ też nie jest optymalne bo musisz zmieniać wartości w dwóch miejscach, nie ma ludzi doskonałych, wiesz lepiej daj przykład własny autor sobie sam wybierze co bardziej rozumie i mu pasuje, a takie przygryzanie do niczego nie prowadzi. smile.gif
Pyton_000
A po co te opisy w JS? Przecież ALT załatwia sprawę. Na dodatek użycie systemu szablonów odcina drogę do wypełniania treści automatem.
PrinceOfPersia
No tak, tylko że akurat refaktoryzowałem kod wrzucony przez kafowiego pod kątem reużywalności kodu, bez zmieniania ogólnej logiki działania wink.gif

Ale co do tego czy lepiej alt czy w obiekcie JavaScript? Myślę, że zależy od sytuacji. Dane w obiekcie JavaScript są o tyle wygodne, że można je wygodnie pobrać AJAXem z JSONa. Z drugiej strony jeśli nie korzystamy z AJAXA, a generujemy cały kod HTML po stronie serwera (używając jakiegoś systemu szablonów), wygodniej pewnie będzie wsadzić to do alt (albo do jakiegoś atrybutu data-*, bo niekoniecznie napis w okienku musi być taki sam jak atrybut alt), wtedy łatwo wygenerujemy na serwerze razem z resztą HTMLa.

Ale z kolei strony jeśli dane napisów będą w obiekcie JavaScript, to łatwo będzie je podmienić dynamicznie (np. kiedy robimy kilkujęzyczne wersje strony internetowej - wtedy po kliknięciu np. EN podmieniamy po prostu obiekt z tekstami i jupi - mamy po angielsku). Obiekt JavaScript może łatwo posłużyć też jako model do frameworków typu Angular...

Tylko, że to takie dalekie rozkminy, myślę, że zbyt dalekie jak na potrzeby tego wątku. W realnej sytuacji raczej by trzeba było napisać rozwiązanie odpowiednie do danych potrzeb, a potem się martwić.
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.