Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX][JavaScript]Zwracanie wartości div'a.
Salur
post
Post #1





Grupa: Zarejestrowani
Postów: 179
Pomógł: 0
Dołączył: 28.12.2014

Ostrzeżenie: (20%)
X----

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.

Ten post edytował Salur 6.07.2015, 10:10:40
Go to the top of the page
+Quote Post
kafowi
post
Post #2





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

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

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





Grupa: Zarejestrowani
Postów: 179
Pomógł: 0
Dołączył: 28.12.2014

Ostrzeżenie: (20%)
X----

Chodzi mi aby ten obrazek którego kliknąłem pokazał się obok w divie i pod nim opis.
Go to the top of the page
+Quote Post
kafowi
post
Post #4





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

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

[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
Go to the top of the page
+Quote Post
Salur
post
Post #5





Grupa: Zarejestrowani
Postów: 179
Pomógł: 0
Dołączył: 28.12.2014

Ostrzeżenie: (20%)
X----

Dziękuję bardzo.
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #6





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

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

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ę.

Ten post edytował PrinceOfPersia 6.07.2015, 11:41:02
Go to the top of the page
+Quote Post
kafowi
post
Post #7





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

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

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.
Go to the top of the page
+Quote Post
Pyton_000
post
Post #8





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

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

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.
Go to the top of the page
+Quote Post
prz3kus
post
Post #9





Grupa: Zarejestrowani
Postów: 260
Pomógł: 30
Dołączył: 22.01.2007

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

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. (IMG:style_emoticons/default/smile.gif)

Ten post edytował prz3kus 6.07.2015, 13:18:05
Go to the top of the page
+Quote Post
Pyton_000
post
Post #10





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

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

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.
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #11





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

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

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 (IMG:style_emoticons/default/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ć.

Ten post edytował PrinceOfPersia 8.07.2015, 03:04:56
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 22.08.2025 - 18:19
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn