Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript]Zwracanie wartości div'a.
Forum PHP.pl > Forum > Przedszkole
Salur
6.07.2015, 10:00:56
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
6.07.2015, 10:54:51
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:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>JS Bin</title>
  6. </head>
  7. <body>
  8. <div id="zdjecia">
  9.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  10.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  11.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  12.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  13. </div>
  14. <div id="opis"></div>
  15.   <script>
  16.   document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function()
  17.   {
  18.     var opis = "Opis do zdjęcia numer 1";
  19.     document.getElementById("opis").innerHTML = opis;
  20.   }
  21.  
  22.   document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function()
  23.   {
  24.     var opis = "Opis do zdjęcia numer 2";
  25.     document.getElementById("opis").innerHTML = opis;
  26.   }
  27.  
  28.   document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function()
  29.   {
  30.     var opis = "Opis do zdjęcia numer 3";
  31.     document.getElementById("opis").innerHTML = opis;
  32.   }
  33.  
  34.   document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function()
  35.   {
  36.     var opis = "Opis do zdjęcia numer 4";
  37.     document.getElementById("opis").innerHTML = opis;
  38.   }
  39.   </script>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext
Salur
6.07.2015, 10:57:46
Chodzi mi aby ten obrazek którego kliknąłem pokazał się obok w divie i pod nim opis.
kafowi
6.07.2015, 11:06:05 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>JS Bin</title>
  6. </head>
  7. <body>
  8. <div id="zdjecia">
  9.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  10.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  11.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  12.   <img src="https://www.google.com/trends/resources/2327917647-google-icon.png">
  13. </div>
  14. <div id="opis"></div>
  15.   <script>
  16.   document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function()
  17.   {
  18.     var opis = "Opis do zdjęcia numer 1";
  19.     document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  20.   }
  21.  
  22.   document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function()
  23.   {
  24.     var opis = "Opis do zdjęcia numer 2";
  25.     document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  26.   }
  27.  
  28.   document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function()
  29.   {
  30.     var opis = "Opis do zdjęcia numer 3";
  31.     document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  32.   }
  33.  
  34.   document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function()
  35.   {
  36.     var opis = "Opis do zdjęcia numer 4";
  37.     document.getElementById("opis").innerHTML = "<img src=\""+this.src+"\"><br>"+opis;
  38.   }
  39.   </script>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext
Salur
6.07.2015, 11:09:12
Dziękuję bardzo.
PrinceOfPersia
6.07.2015, 11:39:15
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
6.07.2015, 12:24:50
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
6.07.2015, 12: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.
prz3kus
6.07.2015, 13:17:26
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
6.07.2015, 13:22:16
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
8.07.2015, 02:57:24
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.