Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jquery] odkrywanie zawartosci strony, w sposob zagniezdzony ?
veyron
post 6.03.2010, 18:47:11
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 2.04.2006

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
piotrooo89
post 6.03.2010, 19:03:54
Post #2


Newsman


Grupa: Moderatorzy
Postów: 4 005
Pomógł: 548
Dołączył: 7.04.2008
Skąd: Trzebinia/Kraków
mając nazwy class rodziców/potomków przeszukujesz odpowiednią gałąź drzewa DOM.


--------------------
Manual nie boli!

Profesjonalne Call Center

Ouzo Framework
Go to the top of the page
+Quote Post
veyron
post 6.03.2010, 19:06:54
Post #3





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 2.04.2006

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

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.
Go to the top of the page
+Quote Post
piotrooo89
post 6.03.2010, 19:10:26
Post #4


Newsman


Grupa: Moderatorzy
Postów: 4 005
Pomógł: 548
Dołączył: 7.04.2008
Skąd: Trzebinia/Kraków
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


--------------------
Manual nie boli!

Profesjonalne Call Center

Ouzo Framework
Go to the top of the page
+Quote Post
veyron
post 7.03.2010, 12:46:14
Post #5





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 2.04.2006

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

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

Go to the top of the page
+Quote Post
thek
post 8.03.2010, 10:25:12
Post #6





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
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


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
veyron
post 9.03.2010, 23:36:41
Post #7





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 2.04.2006

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

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.
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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 Wersja Lo-Fi Aktualny czas: 20.07.2025 - 01:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn