Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Wyświetlanie divów po kliknięciu w img, jak wyżej.
miras
post
Post #1





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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!


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
markonix
post
Post #2





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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

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

Ten post edytował markonix 22.07.2012, 14:01:38


--------------------
eBizo.pl || Generator losowych haseł || Doładowania telefonów (VAT 23%), w tym płatność BITcoin || Zwiększ liczbę wejść na Twoją stronę
Go to the top of the page
+Quote Post
miras
post
Post #3





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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>


?


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
markonix
post
Post #4





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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

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ą).

Ten post edytował markonix 22.07.2012, 15:34:18


--------------------
eBizo.pl || Generator losowych haseł || Doładowania telefonów (VAT 23%), w tym płatność BITcoin || Zwiększ liczbę wejść na Twoją stronę
Go to the top of the page
+Quote Post
miras
post
Post #5





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
markonix
post
Post #6





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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

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


--------------------
eBizo.pl || Generator losowych haseł || Doładowania telefonów (VAT 23%), w tym płatność BITcoin || Zwiększ liczbę wejść na Twoją stronę
Go to the top of the page
+Quote Post
miras
post
Post #7





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
markonix
post
Post #8





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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

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


--------------------
eBizo.pl || Generator losowych haseł || Doładowania telefonów (VAT 23%), w tym płatność BITcoin || Zwiększ liczbę wejść na Twoją stronę
Go to the top of the page
+Quote Post
miras
post
Post #9





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX--- 



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


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
bpskiba
post
Post #10





Grupa: Zarejestrowani
Postów: 340
Pomógł: 49
Dołączył: 3.07.2009
Skąd: Rzeszów

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

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.

Ten post edytował bpskiba 23.07.2012, 13:30:18
Go to the top of the page
+Quote Post
miras
post
Post #11





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
bpskiba
post
Post #12





Grupa: Zarejestrowani
Postów: 340
Pomógł: 49
Dołączył: 3.07.2009
Skąd: Rzeszów

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

[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


Ten post edytował bpskiba 23.07.2012, 13:36:02
Go to the top of the page
+Quote Post
markonix
post
Post #13





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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

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.


--------------------
eBizo.pl || Generator losowych haseł || Doładowania telefonów (VAT 23%), w tym płatność BITcoin || Zwiększ liczbę wejść na Twoją stronę
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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