Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] odkrywanie zawartosci strony
Forum PHP.pl > Forum > Po stronie przeglądarki
veyron
6.03.2010, 18:47:11
witam
mamy sobie taka strukture strony:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
  3. <head>
  4. <title>Strona z nieuporządkowaną listą</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6.  
  7. <style type="text/css">
  8. ul
  9. {
  10. list-style-type: none;
  11. }
  12. li.highlight
  13. {
  14. background: #000;
  15. color: #fff;
  16. }
  17. ul#lista li div.wiecej, ul#lista li div.wiecej2
  18. {
  19. display: none;
  20. }
  21.  
  22. ul#lista li h1, ul#lista li h2 {
  23.     display: inline;
  24. }
  25.  
  26. </style>
  27.  
  28. <!-- dodanie jQuery do dokumentu -->
  29. <script type="text/javascript" src="jquery-latest.js"></script>
  30.  
  31. <!-- Nasz kod java script: -->
  32.  
  33. <script type="text/javascript">
  34.  
  35. $(document).ready(
  36. function()
  37. {
  38. $("ul#lista li div.klik").click( function() { $(this).next("div.wiecej").toggle(); });
  39. });
  40. </script>
  41.  
  42. </head>
  43. <body>
  44. <ul id="lista">
  45.  
  46. <li><div class="klik"><h1>Nazwa 4</h1><h1>kraj</h1><h1>kod</h1><h1>miasto</h1><h1>ulica</h1></div>
  47. <div class="wiecej">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim<h2>klik2</h2> ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  48. <div class="wiecej2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  49. </li>
  50.  
  51. <li><div class="klik"><h1>Nazwa 4</h1><h1>kraj</h1><h1>kod</h1><h1>miasto</h1><h1>ulica</h1></div>
  52. <div class="wiecej">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim<h2>klik2</h2> ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  53. <div class="wiecej2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  54. </li>
  55.  
  56. <li><div class="klik"><h1>Nazwa 4</h1><h1>kraj</h1><h1>kod</h1><h1>miasto</h1><h1>ulica</h1></div>
  57. <div class="wiecej">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim<h2>klik2</h2> ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  58. <div class="wiecej2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  59. </li>
  60.  
  61. </ul>
  62. </body>
  63. </html>
[HTML] pobierz, plaintext

po kliknieciu diva o klasie klik, odkrywa sie tresc diva o klasie wiecej. div o klasie wiecej zawiera element np h2.
jak zrobic, zeby po kliknieciu elementu h2 "klik2" zjezdzala tresc diva o klasie wiecej2 ? czyli innymi slowy jak zagniezdzac dzialanie toggla ?
pozdrawiam.
piotrooo89
6.03.2010, 19:03:54
mając nazwy class rodziców/potomków przeszukujesz odpowiednią gałąź drzewa DOM.
veyron
6.03.2010, 19:06:54
Cytat(piotrooo89 @ 6.03.2010, 19:03:54 ) *
mając nazwy class rodziców/potomków przeszukujesz odpowiednią gałąź drzewa DOM.

przyznaje szczerze, ze jestem zielony, jesli chodzi o js, jquery, wobec czego poprosilbym o lopatologie z przykladami.
pozdrawiam.
piotrooo89
6.03.2010, 19:10:26
noo robisz to dokładnie w ten sam sposób:

[HTML] pobierz, plaintext 
  1. $("ul#lista li div.wiecej h2").click( function() { $(this).next("div.wiecej2").toggle(); });
[HTML] pobierz, plaintext
veyron
7.03.2010, 12:46:14
Cytat(piotrooo89 @ 6.03.2010, 19:10:26 ) *
noo robisz to dokładnie w ten sam sposób:

[HTML] pobierz, plaintext 
  1. $("ul#lista li div.wiecej h2").click( function() { $(this).next("div.wiecej2").toggle(); });
[HTML] pobierz, plaintext


no wlasnie tak probowalem i nie chce dzialac

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
  3. <head>
  4. <title>Strona z nieuporządkowaną listą</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6.  
  7. <style type="text/css">
  8. ul
  9. {
  10. list-style-type: none;
  11. }
  12. li.highlight
  13. {
  14. background: #000;
  15. color: #fff;
  16. }
  17. ul#lista li div.wiecej, ul#lista li div.wiecej2
  18. {
  19. display: none;
  20. }
  21.  
  22. ul#lista li h1, ul#lista li h2 {
  23.     display: inline;
  24. }
  25.  
  26. </style>
  27.  
  28. <!-- dodanie jQuery do dokumentu -->
  29. <script type="text/javascript" src="jquery-latest.js"></script>
  30.  
  31. <!-- Nasz kod java script: -->
  32.  
  33. <script type="text/javascript">
  34.  
  35. $(document).ready(
  36. function()
  37. {
  38. $("ul#lista li div.klik").click( function() { $(this).next("div.wiecej").toggle(); });
  39. $("ul#lista li div.wiecej h2").click( function() { $(this).next("div.wiecej2").toggle(); });
  40. });
  41. </script>
  42.  
  43. </head>
  44. <body>
  45. <ul id="lista">
  46.  
  47. <li><div class="klik"><h1>Nazwa 4</h1><h1>kraj</h1><h1>kod</h1><h1>miasto</h1><h1>ulica</h1></div>
  48. <div class="wiecej">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim<h2>klik2</h2> ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  49. <div class="wiecej2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  50. </li>
  51.  
  52. <li><div class="klik"><h1>Nazwa 4</h1><h1>kraj</h1><h1>kod</h1><h1>miasto</h1><h1>ulica</h1></div>
  53. <div class="wiecej">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim<h2>klik2</h2> ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  54. <div class="wiecej2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  55. </li>
  56.  
  57. <li><div class="klik"><h1>Nazwa 4</h1><h1>kraj</h1><h1>kod</h1><h1>miasto</h1><h1>ulica</h1></div>
  58. <div class="wiecej">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim<h2>klik2</h2> ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  59. <div class="wiecej2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</div>
  60. </li>
  61.  
  62. </ul>
  63. </body>
  64. </html>
[HTML] pobierz, plaintext

thek
8.03.2010, 10:25:12
Dlatego, że h2 jest zagnieżdżony w div. Zauważ, że w Twoim przykładzie masz klasę klik i od razu odkrywasz diva będącego za nim. Tymczasem w 2 przypadku klikasz w h2, które jest wewnątrz jakiegoś div. Musisz więc nie tylko wskazać następny div, ale wpierw "powiedzieć", że to div względem rodzica h2. Czyli najprościej rzecz ujmując struktura typu $this -> rodzic -> next.
W wywołaniu
$("ul#lista li div.wiecej h2").click( function() { $(this).TUTAJ.next("div.wiecej2").toggle(); });
musisz więc w TUTAJ zrobić przejście do węzła rodzica i skrypt zadziała. Popatrz na coś takiego jak parent() smile.gif
veyron
9.03.2010, 23:36:41
Cytat(thek @ 8.03.2010, 08:25:12 ) *
Dlatego, że h2 jest zagnieżdżony w div. Zauważ, że w Twoim przykładzie masz klasę klik i od razu odkrywasz diva będącego za nim. Tymczasem w 2 przypadku klikasz w h2, które jest wewnątrz jakiegoś div. Musisz więc nie tylko wskazać następny div, ale wpierw "powiedzieć", że to div względem rodzica h2. Czyli najprościej rzecz ujmując struktura typu $this -> rodzic -> next.
W wywołaniu
$("ul#lista li div.wiecej h2").click( function() { $(this).TUTAJ.next("div.wiecej2").toggle(); });
musisz więc w TUTAJ zrobić przejście do węzła rodzica i skrypt zadziała. Popatrz na coś takiego jak parent() smile.gif

dzieki, udalo sie guitar.gif
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.