Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] jQuery Zaznaczenie wybranego zdjęcia
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
tomeknh
6.08.2010, 23:04:59
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
erix
6.08.2010, 23:15:15 
[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
flashdev
6.08.2010, 23:15:52
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.
tomeknh
6.08.2010, 23:39:58
Niestety ani jeden ani drugi kod nie działa...kombinuję z tym ale niestety mi nic nie wychodzi sad.gif
flashdev
6.08.2010, 23:46:46
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
tomeknh
6.08.2010, 23:56:09
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
flashdev
6.08.2010, 23:58:15
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
tomeknh
7.08.2010, 00: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
flashdev
7.08.2010, 00:14:21
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
tomeknh
7.08.2010, 10:12:21
Super działa!!! dziękuje Ci bardzo za pomoc!!! pozdrawiam
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.