Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JS] jQuery Zaznaczenie wybranego zdjęcia
tomeknh
post
Post #1





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Witam,

Mam div z zdjęciami:
[HTML] pobierz, plaintext 
  1. <div id="thumbs">
  2. <img src="foto/>
  3. <img src="foto/>
  4. <img src="foto/>
  5. <img src="foto/>
  6. </div>
[HTML] pobierz, plaintext


Oraz kod jQuery

[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.  
  3. $("#thumbs img").click(function() {
  4. $(this).css("border", "1px solid red");
  5. });
  6.  
  7. }
  8. );
[HTML] pobierz, plaintext


Po kliknięciu w dany obrazek robi się w okół niego czerwona ramka. Jak zrobić żeby klikając w nowy obrazek ramka z poprzedniego znikała?questionmark.gifquestionmark.gif
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




 
[JAVASCRIPT] pobierz, plaintext 
  1. var imgs = $("#thumbs img");
  2. imgs.click(function() {
  3. $(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  4. });
[JAVASCRIPT] pobierz, plaintext

pisane z palca. Nie ma sensu tego tłumaczyć, kod mówi sam za siebie, co robi.

edit@down: tylko że Twoje rozwiązanie wymaga każdorazowego przeszukiwania drzewa. winksmiley.jpg
Powód edycji: [erix]:


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
flashdev
post
Post #3





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

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

Cytat(tomeknh @ 7.08.2010, 00:04:59 ) *
[...]
Po kliknięciu w dany obrazek robi się w okół niego czerwona ramka. Jak zrobić żeby klikając w nowy obrazek ramka z poprzedniego znikała?questionmark.gifquestionmark.gif


Skoro umiesz dodać, to co za problem uprzednio usunąć winksmiley.jpg

[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.  
  3. $("#thumbs img").click(function() {
  4. $(this).parent().children('img').css("border", "0");
  5. $(this).css("border", "1px solid red");
  6. });
  7.  
  8. }
  9. );
[HTML] pobierz, plaintext


edit@up: Stawiam dopiero pierwsze kroki w jQuery, ale dziękuję za zwrócenie słusznej uwagi. Wiem że nie jest to optymalne rozwiązanie jednak w większości przypadków (no przecież to tylko kilka obrazków winksmiley.jpg ) takie wystarczy.

Ten post edytował flashdev 6.08.2010, 23:23:13


--------------------
generator haseł
Go to the top of the page
+Quote Post
tomeknh
post
Post #4





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Niestety ani jeden ani drugi kod nie działa...kombinuję z tym ale niestety mi nic nie wychodzi sad.gif
Go to the top of the page
+Quote Post
flashdev
post
Post #5





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

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

Cytat(tomeknh @ 7.08.2010, 00:39:58 ) *
Niestety ani jeden ani drugi kod nie działa...kombinuję z tym ale niestety mi nic nie wychodzi sad.gif


Czyżby?

[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5. 	if( 1 ){
  6. 		$("#thumbs img").click(function() {
  7. 			$(this).parent().children('img').css("border", "0");
  8. 			$(this).css("border", "1px solid red");
  9. 		});
  10. 	}else{
  11. 		var imgs = $("#thumbs img");
  12. 		imgs.click(function() {
  13. 			$(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  14. 		});
  15. 	}
  16. });
  17.  
  18. </script>
  19.  
  20.  
  21. <div id="thumbs">
  22. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  23. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  24. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  25. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  26. </div>
[HTML] pobierz, plaintext


--------------------
generator haseł
Go to the top of the page
+Quote Post
tomeknh
post
Post #6





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Niestety nie działa...popatrz:


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  4. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  5. <title></title>
  6. <style type="text/css">
  7. img {
  8. border:0;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13. 	if( 1 ){
  14. 		$("#thumbs img").click(function() {
  15. 			$(this).parent().children('img').css("border", "0");
  16. 			$(this).css("border", "1px solid red");
  17. 		});
  18. 	}else{
  19. 		var imgs = $("#thumbs img");
  20. 		imgs.click(function() {
  21. 			$(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  22. 		});
  23. 	}
  24. });
  25.  
  26.  
  27. </script>
  28. </head>
  29. <body>
  30.  
  31. <div style="width:880px;height:665px;margin:0 auto;text-align:left;" id="thumbs">
  32. 	<div>
  33. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 1)">
  34. 		<img src="s_0u2mu5pn.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  35. 		</a>
  36.  
  37. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 2)">
  38. 		<img src="s_zzz5q6n3.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  39. 		</a>
  40.  
  41. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 3)">
  42. 		<img src="s_49bqgdda.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  43. 		</a>
  44.  
  45. 		<a href="java script:void(0);" onclick="show('bz57l6hp.gif', 1024, 4)">
  46. 		<img src="s_q1gjczlh.gif" alt="" style="padding-right:8px;position:relative;top:0px;">
  47. 		</a>
  48.  
  49. 		<img src="files/img/spacer.gif" style="height:60px;width:278px;">
  50.  
  51. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 5)">
  52. 		<img src="s_feqg5ngk.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  53. 		</a>
  54.  
  55. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 500, 6)">
  56. 		<img src="s_up2ygwan.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  57. 		</a>
  58.  
  59. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 7)">
  60. 		<img src="s_bz57l6hp.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  61. 		</a>
  62.  
  63. 		<a href="java script:void(0);" onclick="show('eyx8hgel.jpg', 1024, 8)">
  64. 		<img src="s_eyx8hgel.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  65. 		</a>
  66. 	</div>
  67. </div>
  68.  
  69.  
  70. </body></html>
  71.  
[HTML] pobierz, plaintext


Ten post edytował tomeknh 6.08.2010, 23:57:49
Go to the top of the page
+Quote Post
flashdev
post
Post #7





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

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

Przzecież masz inny kod ph34r.gif

$("#thumbs img") -> $("#thumbs div img")

Edit:
Dziwnie tworzysz tą stronę, część akcji dodajesz w kodzie js, a część bezpośrednio w html inline.
Kilka dobrych rad:
- wyrzucić style inline
- wyrzucić skrypty inline
- skrypty i style ładować do dokumentu jako zewnętrzne pliki

Ten post edytował flashdev 7.08.2010, 00:02:37


--------------------
generator haseł
Go to the top of the page
+Quote Post
tomeknh
post
Post #8





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

nie zwracaj uwagi na to jak jest stworzone bo to tylko testowy plik i moze tam byc balagan duuuuuuuzy ale chodzi o to zeby dzialalo - potem to przeniose do wlasciwej strony.....

zmieniłem na #thumbs div img i nadal nie dziala......juz nie mam sily do tego sad.gif
Go to the top of the page
+Quote Post
flashdev
post
Post #9





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

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

Cytat(tomeknh @ 7.08.2010, 01:05:14 ) *
nie zwracaj uwagi na to jak jest stworzone bo to tylko testowy plik i moze tam byc balagan duuuuuuuzy ale chodzi o to zeby dzialalo - potem to przeniose do wlasciwej strony.....

zmieniłem na #thumbs div img i nadal nie dziala......juz nie mam sily do tego sad.gif


Mój błąd, miało być: div a img

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  4. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  5. <title></title>
  6. <style type="text/css">
  7. img {
  8. border:0;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13. 	if( 1 ){
  14. 		$("#thumbs div a img").click(function() {
  15. 			$(this).parent().parent().children('a').children('img').css("border", "0");
  16. 			$(this).css("border", "1px solid red");
  17. 		});
  18. 	}else{
  19. 		var imgs = $("#thumbs div a img");
  20. 		imgs.click(function() {
  21. 			$(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  22. 		});
  23. 	}
  24. });
  25.  
  26.  
  27. </script>
  28. </head>
  29. <body>
  30.  
  31. <div style="width:880px;height:665px;margin:0 auto;text-align:left;" id="thumbs">
  32. 	<div>
  33. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 1)">
  34. 		<img src="s_0u2mu5pn.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  35. 		</a>
  36.  
  37. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 2)">
  38. 		<img src="s_zzz5q6n3.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  39. 		</a>
  40.  
  41. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 3)">
  42. 		<img src="s_49bqgdda.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  43. 		</a>
  44.  
  45. 		<a href="java script:void(0);" onclick="show('bz57l6hp.gif', 1024, 4)">
  46. 		<img src="s_q1gjczlh.gif" alt="" style="padding-right:8px;position:relative;top:0px;">
  47. 		</a>
  48.  
  49. 		<img src="files/img/spacer.gif" style="height:60px;width:278px;">
  50.  
  51. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 5)">
  52. 		<img src="s_feqg5ngk.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  53. 		</a>
  54.  
  55. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 500, 6)">
  56. 		<img src="s_up2ygwan.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  57. 		</a>
  58.  
  59. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 7)">
  60. 		<img src="s_bz57l6hp.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  61. 		</a>
  62.  
  63. 		<a href="java script:void(0);" onclick="show('eyx8hgel.jpg', 1024, 8)">
  64. 		<img src="s_eyx8hgel.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  65. 		</a>
  66. 	</div>
  67. </div>
  68.  
  69.  
  70. </body></html>
[HTML] pobierz, plaintext


--------------------
generator haseł
Go to the top of the page
+Quote Post
tomeknh
post
Post #10





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Super działa!!! dziękuje Ci bardzo za pomoc!!! pozdrawiam
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 15:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn