Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Wyświetlanie divów po kliknięciu w img
Forum PHP.pl > Forum > Przedszkole
miras
22.07.2012, 13:59:54
Witam, mam następujący problem muszę zrobić takie 'coś', że: mam 3 obrazki po kliknieciu w pierwszy obrazek wyświetla się div1 w 2 div2 itd.

Nie mam pojęcia jak się za to zabrać.

Dzięki z góry!
markonix
22.07.2012, 14:01:28
jquery, click() i potem to już zupełna dowolność.
Zależy czy dynamiczne te divy ma pobierać czy po prostu domyślnie są ukryte (wtedy proste hide i show).
miras
22.07.2012, 15:05:23
naskrobałem coś takiego:

[XML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var onl=(onload||new Function), pokazane
  3. onload=function(){
  4.     onl();
  5.     for(i=0;x=document.getElementById('ukryte'+i++);)x.style.display='none';
  6. }
  7. function sh(a){
  8.     if(pokazane)pokazane.style.display='none';
  9.     (pokazane=document.getElementById('ukryte'+a.value)).style.display=''
  10. }
  11. </script>
[XML] pobierz, plaintext



i jak to zroibć teraz ? <img src="ssdsad.jpg" alt="" value="1" onclick="sh(this)"/>

i później <div id="ukryte1"> </div>


?
markonix
22.07.2012, 15:32:27
Naskrobałeś czy skopiowałeś?

Napisałem Ci żebyś skorzystał z jQuery - jeżeli zawsze będą 3 to wystarczy tak.
[HTML] pobierz, plaintext 
  1. <img id="img_1" class="switch" />
  2. <img id="img_2" class="switch" />
  3. <img id="img_3" class="switch" />
  4.  
  5. <div class="img_1" />
  6. <div class="img_2" />
  7. <div class="img_3" />
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. 	$('.switch').click(function() {
  4.  
  5. 		Pobierz do zmiennej ID
  6. 		var id;
  7.  
  8. 		I potem można tak się odwoływać
  9. 		$('div.' + id).show();
  10.  
  11. 		Oczywiście trzeba pozostałe schować, najprościej schować wszystkie przed powyższą linią.
  12.  
  13. 	});
  14.  
  15. });
[PHP] pobierz, plaintext


Jeżeli liczba obrazków będzie zmienną to proponuje jakiś atrybut np. "rel", który będzie przyjmował numery od 1 w górę.
Kod będzie zbliżony do powyższego tylko szukanie po atrybucie nie po klasie (klasa nie może być cyfrą).
miras
22.07.2012, 15:36:36
nie nie skopiowałem, ten kod jest mojego autorstwa akurat, jquery w ogóle nie znam (js praktycznie też) więc, co będę świrował, ten przykład, który podałem działa dla pól formularza typu radio np. i wtedy elegancko przesyła, pomóż mi zrobić, tak z kliknięciem w obrazek, żeby działało...
markonix
22.07.2012, 16:06:12
Dałem Ci 3/4 gotowca. Wystarczy dopisać dwie linie kodu zgodnie z komentarzami.
Jak liczysz na gotowce to masz od tego inny dział na tym forum.

Masz prawie 200 postów i grubo ponad rok stażu na tym forum - trochę ambicji.
jQuery jest banalne, znajomość JS nie jest przy nim wymagana (oprócz semantyki, która dużo się nie różni na tym poziomie od PHP).
miras
22.07.2012, 17:38:49
Id pobrałem do zmiennej ( mam nadzieję, że dobrze, ale z ukrywaniem divów nic nie mogę znaleźć..


[XML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. 	$('.switch').click(function() {
  4.  
  5.  
  6. 		var id = ui.draggable.attr( 'id' ); 
  7.  
  8. 		I potem można tak się odwoływać
  9. 		$('div.' + id).show();
  10.  
  11. 		Oczywiście trzeba pozostałe schować, najprościej schować wszystkie przed powyższą linią.
  12.  
  13. 	});
  14.  
  15. });
[XML] pobierz, plaintext
markonix
22.07.2012, 18:26:13
A gdzie w HTML masz id i draggable.... Skąd Ty to wytrzasnąłeś...
No i stosuj jQuery, po co surowym JSem operujesz.

Cytat
jquery get id


A co do chowania obiektów to jak myślisz, jeżeli istnieje funkcja show.. To jaka będzie funkcja dla ukrywania..
miras
23.07.2012, 12:37:52 


[XML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. 	$('.switch').click(function() {
  4.  
  5.  
  6. 		var id = $(this).attr('id');
  7.  
  8. 		I potem można tak się odwoływać
  9. 		$('div.' + id).show();
  10.  
  11. 		$('div.' + id).hide();
  12.  
  13. 	});
  14.  
  15. });
[XML] pobierz, plaintext


no dobrze, mam nadzieję, że teraz jest ok, ale chyba trzeba postawić jeszcze jakieś warunki które divy mają być schowane ? czy się myle, już to mówiłem wcześniej, że poziom jquery u mnie = 0...
bpskiba
23.07.2012, 13:27:01
Niniejsza dyskusja jest wręcz fascynująca smile.gif
Ja napiszę to:
[HTML] pobierz, plaintext 
  1. <HTML>
  2. <BODY>
  3. <img src='logo.JPG' onclick="document.getElementById('d1').style.display='inline'"> <br>
  4. <img src='logo.JPG' onclick="document.getElementById('d2').style.display='inline'"> <br>
  5. <div id='d1' style="display='none'">to jest div 1 </div>
  6. <div id='d2' style="display='none'">to jest div 2 </div>
  7. </BODY>
  8. </html>
[HTML] pobierz, plaintext


To niesamowicie fascynujące jak młodzież zachwala jquery czując strach przed javascriptem. Z mojego punktu widzenia jquery jest tak nieczytelny, że lepiej zostawić go w spokoju. Wstawianie całych funkcji anonimowych jako argument kolejnej funkcji anonimowej może doprowadzić do szału. Przecież znalezienie końca linii wymaga jasnowidza.
Nie znaczy to, że sam nie posługuję się gotowcami jquery, ale warto robić to tam, gdzie ma to sens.
miras
23.07.2012, 13:30:13
szkoda, że nie powiedziałeś tego wcześniej, już nie zrezygnuję z tego rozwiązania, już zrobiłem warunki, działa wszystko, tylko jest jeszcze źle jak się w nic nie kliknie, bo wyświetlają się 3 divy.. a ja chciałbym zrobić, żeby np. gdy nic nie jest jeszcze kliknięte niech będzie wyświetlony pierwszy div..

[XML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. $('.switch').click(function() {
  4.  
  5.  
  6. 		var id = $(this).attr('id');
  7.  
  8.  
  9. 		$('div.' + id).show();
  10.  
  11.  
  12.  		if (id == "img_1") {
  13.  
  14. 		$('div.' + "img_2").hide();	
  15. 		$('div.' + "img_3").hide();
  16.  
  17. 		}
  18.  
  19. 		if (id == "img_2") {
  20.  
  21. 		$('div.' + "img_1").hide();	
  22. 		$('div.' + "img_3").hide();
  23.  
  24. 		}
  25.  
  26. 		if (id == "img_3") {
  27.  
  28. 		$('div.' + "img_1").hide();	
  29. 		$('div.' + "img_2").hide();
  30.  
  31. 		}
  32.  
  33.  
  34. 	});
  35.  
  36. });
[XML] pobierz, plaintext
bpskiba
23.07.2012, 13:35:28 
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. $('.switch').click(function() {
  4.  
  5. 		$('div.' + "img_2").hide();	
  6. 		$('div.' + "img_3").hide(); 
  7. 		var id = $(this).attr('id');
  8.  
  9.  
  10. ............................................... 
[HTML] pobierz, plaintext
markonix
24.07.2012, 12:23:48
Albo je ukryj po ludzku samym cssem.
Wybór rozwiązania zależy od tego jak preferowane jest aby strona wyglądała bez włączonego JSa.
Jeżeli lepiej żeby wyświetlał się pierwszy, użyj css, który jest lepszym rozwiązaniem w ogóle.
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.