Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][jQuery] Problem z dynamicznym rozwijaniem treści
seniu123
post 4.04.2010, 23:38:08
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

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

Witam,

mam problem z rozwijanymi treściami. Problem polega na tym że gdy mam wyświetlone powyżej jednej wiadomości to mogę jedynie pierwszą rozwinąć. Z innymi nie da się nic zrobić.

Oto mój kod dla dwóch wiadomości:

[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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Cos</title>
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(function()
  9. {
  10.  
  11. $("#mostrar").click(function(event) {
  12. event.preventDefault();
  13. $("#caja").slideToggle();
  14. });
  15.  
  16. $("#caja .close").click(function(event) {
  17. event.preventDefault();
  18. $("#caja").slideUp();
  19. });
  20. });
  21. </script>
  22. <style type="text/css">
  23. body {
  24. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  25. 	font-size: 11px;
  26. 	color: #666666;	
  27. }
  28. a{color:#993300; text-decoration:none;}
  29. #caja {
  30. width:70%;
  31. display: none;
  32. padding:5px;
  33. border:2px solid #FADDA9;
  34. background-color:#FDF4E1;
  35. }
  36. #mostrar{
  37. display:block;
  38. width:70%;
  39. padding:5px;
  40. border:2px solid #D0E8F4;
  41. background-color:#ECF8FD;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <a href="#" id="mostrar">Wiadmosc 1</a>
  47.  
  48. <div id="caja">
  49. <a href="#" class="close">[x]</a>
  50. <p>bla bla ba</p>
  51. </div>
  52.  
  53. <a href="#" id="mostrar">Wiadomosc 2</a>
  54.  
  55. <div id="caja">
  56. <a href="#" class="close">[x]</a>
  57. <p>bla bla bla</p>
  58. </div>
  59. </body>
  60. </html>
[HTML] pobierz, plaintext


Z góry dzięki za pomoc smile.gif
Go to the top of the page
+Quote Post
tomm
post 5.04.2010, 00:00:49
Post #2





Grupa: Zarejestrowani
Postów: 142
Pomógł: 28
Dołączył: 7.04.2008

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

masz dla kilku elementów to samo ID? użyj klasy i this
Go to the top of the page
+Quote Post
mortus
post 5.04.2010, 06:51:29
Post #3





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

tomm ma rację, ale postaram się bardziej rozjaśnić. Specyfikacja W3C dotycząca języka (X)HTML mówi, że w dokumencie może istnieć tylko jeden element o danym identyfikatorze (id). Jeżeli będziemy mieć tych elementów więcej, to JavaScript i tak wybierze pierwszy, ponieważ pozostałe dla JS nie istnieją. Rozwiązaniem problemu jest wykorzystanie klas, dla elementów, które mają się powtarzać i wyglądać tak samo.
Go to the top of the page
+Quote Post
seniu123
post 6.04.2010, 12:30:37
Post #4





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

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

Po zastosowaniu class teraz otwierają się wszystkie naraz. A co teraz zrobić żeby otwierały się pojedynczo? Z góry dzięki za pomoc smile.gif

[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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Cos</title>
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(function()
  9. {
  10.  
  11. $(".mostrar").click(function(event) {
  12. event.preventDefault();
  13. $(".caja").slideToggle();
  14. });
  15.  
  16. $(".caja .close").click(function(event) {
  17. event.preventDefault();
  18. $(".caja").slideUp();
  19. });
  20. });
  21. </script>
  22. <style type="text/css">
  23. body {
  24. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  25. 	font-size: 11px;
  26. 	color: #666666;	
  27. }
  28. a{color:#993300; text-decoration:none;}
  29. .caja {
  30. width:70%;
  31. display: none;
  32. padding:5px;
  33. border:2px solid #FADDA9;
  34. background-color:#FDF4E1;
  35. }
  36. .mostrar{
  37. display:block;
  38. width:70%;
  39. padding:5px;
  40. border:2px solid #D0E8F4;
  41. background-color:#ECF8FD;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <a href="#" class="mostrar">Wiadmosc 1</a>
  47.  
  48. <div class="caja">
  49. <a href="#" class="close">[x]</a>
  50. <p>bla bla ba</p>
  51. </div>
  52.  
  53. <a href="#" class="mostrar">Wiadomosc 2</a>
  54.  
  55. <div class="caja">
  56. <a href="#" class="close">[x]</a>
  57. <p>bla bla bla</p>
  58. </div>
  59. </body>
  60. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
thek
post 6.04.2010, 12:39:34
Post #5





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
Ja bym zamiast bawić się w kilka klas z wszystkim zrobił jedną na clicku i użył this by pokazać o jaki konkretnie element chodzi.


--------------------
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
mortus
post 6.04.2010, 12:47:54
Post #6





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Cytat(thek @ 6.04.2010, 13:39:34 ) *
Ja bym zamiast bawić się w kilka klas z wszystkim zrobił jedną na clicku i użył this by pokazać o jaki konkretnie element chodzi.

To właśnie trzeba zrobić. Zastępujesz $(".caja") w linii 13 i 18 tym $(this + " .caja")
Go to the top of the page
+Quote Post
seniu123
post 6.04.2010, 12:53:47
Post #7





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

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

po zamianie na $(this + " .caja") to teraz nic się nie otwiera
Go to the top of the page
+Quote Post
mortus
post 6.04.2010, 13:05:33
Post #8





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Sorki, miałem w głowie jeszcze inny kod. Tak to rzeczywiście nie zadziała. Trzeba trochę inaczej to zorganizować. 
[HTML] pobierz, plaintext 
  1. <div class="klasa">
  2.     <a href="#" class="mostrar">Wiadmosc 1</a>
  3.     <div class="caja">
  4.         <a href="#" class="close">[x]</a>
  5.         <p>bla bla ba</p>
  6.     </div>
  7. </div>
[HTML] pobierz, plaintext
i do tego wspomniane linie:
Kod
$($(this).parent() + " .caja")
Powinno działać.
Go to the top of the page
+Quote Post
seniu123
post 6.04.2010, 13:17:06
Post #9





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

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

czy mógłbyś to wstawić w ten mój kod, bo jak ja wstawiam to coś mi nie działa to co podałeś winksmiley.jpg Jak trzeba zdefiniować tą nową klase "klasa" żeby wszystko działało?

Kod teraz wygląda następująco:

[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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Cos</title>
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(function()
  9. {
  10.  
  11. $(".mostrar").click(function(event) {
  12. event.preventDefault();
  13. $($(this).parent() + " .caja").slideToggle();
  14. });
  15.  
  16. $(".caja .close").click(function(event) {
  17. event.preventDefault();
  18. $($(this).parent() + " .caja").slideUp();
  19. });
  20. });
  21. </script>
  22. <style type="text/css">
  23. body {
  24. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  25. 	font-size: 11px;
  26. 	color: #666666;	
  27. }
  28. a{color:#993300; text-decoration:none;}
  29. .caja {
  30. width:70%;
  31. display: none;
  32. padding:5px;
  33. border:2px solid #FADDA9;
  34. background-color:#FDF4E1;
  35. }
  36. .mostrar{
  37. display:block;
  38. width:70%;
  39. padding:5px;
  40. border:2px solid #D0E8F4;
  41. background-color:#ECF8FD;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46.       <div class="klasa">
  47.           <a href="#" class="mostrar">Wiadmosc 1</a>
  48.           <div class="caja">
  49.               <a href="#" class="close">[x]</a>
  50.               <p>bla bla ba</p>
  51.           </div>
  52.       </div>
  53. </body>
  54. </html>
[HTML] pobierz, plaintext


Ten post edytował seniu123 6.04.2010, 13:21:44
Go to the top of the page
+Quote Post
mortus
post 6.04.2010, 13:25:23
Post #10





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Funkcja parent() działa jednak trochę inaczej, ale przy jej pomocy możemy uzyskać właściwy efekt. Kod:
[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">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.         <title>Cos</title>
  6.         <script type="text/javascript" src="jquery.js">
  7.         </script>
  8.         <script type="text/javascript">
  9.             $(function(){
  10.                 $(".mostrar").click(function(event){
  11.                     event.preventDefault();
  12.                     $(this).parent().find(".caja").slideToggle();
  13.                 });
  14.                 $(".caja .close").click(function(event){
  15.                     event.preventDefault();
  16.                     $($(this).parent(".caja")).slideUp();
  17.                 });
  18.             });
  19.         </script>
  20.         <style type="text/css">
  21.             body {
  22.                 font-family: Verdana, Arial, Helvetica, sans-serif;
  23.                 font-size: 11px;
  24.                 color: #666666;
  25.             }
  26.  
  27.             a {
  28.                 color: #993300;
  29.                 text-decoration: none;
  30.             }
  31.  
  32.             .caja {
  33.                 width: 70%;
  34.                 display: none;
  35.                 padding: 5px;
  36.                 border: 2px solid #FADDA9;
  37.                 background-color: #FDF4E1;
  38.             }
  39.  
  40.             .mostrar {
  41.                 display: block;
  42.                 width: 70%;
  43.                 padding: 5px;
  44.                 border: 2px solid #D0E8F4;
  45.                 background-color: #ECF8FD;
  46.             }
  47.         </style>
  48.     </head>
  49.     <body>
  50.     	<div class="klasa">
  51.         <a href="#" class="mostrar">Wiadmosc 1</a>
  52.         <div class="caja">
  53.             <a href="#" class="close">[x]</a>
  54.             <p>
  55.                 bla bla ba
  56.             </p>
  57.         </div>
  58. 		</div>
  59. 		<div class="klasa">
  60.         <a href="#" class="mostrar">Wiadomosc 2</a>
  61.         <div class="caja">
  62.             <a href="#" class="close">[x]</a>
  63.             <p>
  64.                 bla bla bla
  65.             </p>
  66.         </div>
  67. 		</div>
  68.     </body>
  69. </html>
[HTML] pobierz, plaintext
EDIT:
klasa jest wykorzystywana tylko do nadania odpowiedniego formatowania elementu div i w sumie nie musi jej być.

Ten post edytował mortus 6.04.2010, 13:27:11
Go to the top of the page
+Quote Post
seniu123
post 6.04.2010, 13:30:54
Post #11





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

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

mortus Wielkie dzięki za pomoc! smile.gif Wszystko działa winksmiley.jpg

Mam jeszcze jedno pytanie winksmiley.jpg
Co zrobić żeby jak otworzy się jedna wiadomość i kliknię się w drugą żeby pierwsza się zamkneła? winksmiley.jpg

Ten post edytował seniu123 6.04.2010, 13:32:37
Go to the top of the page
+Quote Post
mortus
post 6.04.2010, 13:53:25
Post #12





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Kod
                $(".mostrar").click(function(event){
                    event.preventDefault();
                    if (!$(this).parent().find(".caja").hasClass("active")) {
                        $(".active").slideUp();
                        $(".active").removeClass("active");
                    }
                    $(this).parent().find(".caja").addClass("active");
                    $(this).parent().find(".caja").slideToggle();
                });
Go to the top of the page
+Quote Post
seniu123
post 6.04.2010, 23:12:54
Post #13





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

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

Znowu jest problem....

Po przekształceniu kodu na php pojawił się problem rozsuwaniem tych wiadomości... Gdy jest parzysta liczba to nie otwierają się (tzn. otworzą się i zamkną), a gdy jest nie parzysta liczba wiadomości to otworzą się (tzn. kilka razy dana wiadomość otworzy się i zamknie). Nie mam zielonego pojęcia co robić żeby normalnie się otwierały i zamykały...


Oto część mojego kodu:

[PHP] pobierz, plaintext 
  1. if(mysql_num_rows($wynik) > 0) {
  2.     /* jeżeli wynik jest pozytywny, to wyświetlamy dane */
  3.     $roz = "<script type='text/javascript'>
  4.             $(function(){
  5.                 $('.mostrar').click(function(event){
  6.                     event.preventDefault();
  7.                     if (!$(this).parent().find('.caja').hasClass('active')) {
  8.                         $('.active').slideUp();
  9.                         $('.active').removeClass('active');
  10.                     }
  11.                     $(this).parent().find('.caja').addClass('active');
  12.                     $(this).parent().find('.caja').slideToggle();
  13.                 });
  14.  
  15.  
  16.             });
  17.         </script>";
  18.  
  19.     echo"<script type='text/javascript' src='jquery.js'>
  20.             </script>";
  21.         echo "<style type='text/css'>
  22.             body {
  23.                 font-family: Verdana, Arial, Helvetica, sans-serif;
  24.                 font-size: 11px;
  25.                 color: #666666;
  26.             }
  27.  
  28.             a {
  29.                 color: #993300;
  30.                 text-decoration: none;
  31.             }
  32.  
  33.             .caja {
  34.                 width: 70%;
  35.                 display: none;
  36.                 padding: 5px;
  37.                 border: 2px solid #FADDA9;
  38.                 background-color: #FDF4E1;
  39.             }
  40.  
  41.             .mostrar {
  42.                 display: block;
  43.                 width: 70%;
  44.                 padding: 5px;
  45.                 border: 2px solid #D0E8F4;
  46.                 background-color: #ECF8FD;
  47.             }
  48.         </style>";       
  49.     while($r = mysql_fetch_assoc($wynik)) {
  50.  
  51.  
  52.         echo "$roz";
  53.  
  54.         $obrazek1 = "<script language='JavaScript' src='muza/audio-player.js'></script>
  55. <object type='application/x-shockwave-flash' data='muza/player.swf' id='audioplayer1' height='24' width='290'>
  56. <param name='movie' value='muza/player.swf'>
  57. <param name='FlashVars' value='playerID=audioplayer1&soundFile=".$r['numer'].">
  58. <param name='quality' value='high'>
  59. <param name='menu' value='false'>
  60. <param name='wmode' value='transparent'>
  61. </object>";
  62.         echo "<div class='klasa'>";
  63.         echo "<a href='#' class='mostrar'>".$r['nazwa']."</a>";
  64.         echo "<div class='caja'><p>".$r['nazwa']."</p><br>$obrazek1</div>";
  65.         echo "</div>";
  66.     }
  67.  
  68. } 
  69.  
  70. mysql_close();
[PHP] pobierz, plaintext


Zauważyłem jeszcze że ten div wysuwa się i wsuwa w zależności od ilości wyświetlanych wiadomości. np. Gdy jest 6 wiadomości to zrobi 3 razy cały cykl (rozwinie się i zwinie).

Ten post edytował seniu123 6.04.2010, 23:07:09
Go to the top of the page
+Quote Post
mortus
post 7.04.2010, 07:46:07
Post #14





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Źle to robisz. Zauważ, że kilka razy w pętli while umieszczasz skrypt, zarówno ten do rozwijania div-ów, jak i jakiś audio-plajer.js. Prawidłowo powinno to wyglądać tak
[PHP] 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">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.         <title>Cos</title>
  6.         <script type="text/javascript" src="jquery.js">
  7.         </script>
  8.         <script type="text/javascript" src='muza/audio-player.js'>
  9.         </script>
  10.         <script type="text/javascript">
  11.             $(function(){
  12.                 $(".mostrar").click(function(event){
  13.                     event.preventDefault();
  14.                     if (!$(this).parent().find(".caja").hasClass("active")) {
  15.                         $(".active").slideUp();
  16.                         $(".active").removeClass("active");
  17.                     }
  18.                     $(this).parent().find(".caja").addClass("active");
  19.                     $(this).parent().find(".caja").slideToggle();
  20.                 });
  21.                 $(".caja .close").click(function(event){
  22.                     event.preventDefault();
  23.                     $($(this).parent(".caja")).slideUp();
  24.                 });
  25.             });
  26.         </script>
  27.         <style type="text/css">
  28.             body {
  29.                 font-family: Verdana, Arial, Helvetica, sans-serif;
  30.                 font-size: 11px;
  31.                 color: #666666;
  32.             }
  33.  
  34.             a {
  35.                 color: #993300;
  36.                 text-decoration: none;
  37.             }
  38.  
  39.             .caja {
  40.                 width: 70%;
  41.                 display: none;
  42.                 padding: 5px;
  43.                 border: 2px solid #FADDA9;
  44.                 background-color: #FDF4E1;
  45.             }
  46.  
  47.             .mostrar {
  48.                 display: block;
  49.                 width: 70%;
  50.                 padding: 5px;
  51.                 border: 2px solid #D0E8F4;
  52.                 background-color: #ECF8FD;
  53.             }
  54.         </style>
  55.     </head>
  56.     <body>
  57.         <?php 
  58.         // ustanawiamy połączenie z serwerem baz danych
  59.         $connectionLink = mysql_connect('localhost', 'username', 'password');
  60.         // wybieramy bazę danych
  61.         $selectedDatabase = mysql_select_db('database');
  62.         // budujemy zapytanie
  63.         $query = "SELECT * FROM tabela";
  64.         // wykonujemy zapytanie
  65.         $result = mysql_query($query) or die('Błąd zapytania: '.mysql_error());
  66.         if (mysql_num_rows($result) > 0) {
  67.             while ($row = mysql_fetch_array($result)) {
  68.         ?>
  69.         <div class="klasa">
  70.             <a href="#" class="mostrar"><?php echo $row['nazwa']; ?></a>
  71.             <div class="caja">
  72.                 <a href="#" class="close">[x]</a>
  73.                 <p>
  74.                     <?php echo $row['nazwa']; ?>
  75.                 </p>
  76.                 <br/>
  77.                 <object type="application/x-shockwave-flash" data="muza/player.swf" id="audioplayer1" height="24" width="290">
  78.                     <param name="movie" value="muza/player.swf">
  79. 					<param name="FlashVars" value="playerID=audioplayer1&soundFile=<?php echo $row['numer']; ?>">
  80.                     <param name="quality" value="high">
  81. 					<param name="menu" value="false">
  82. 					<param name="wmode" value="transparent">
  83.                 </object>
  84.             </div>
  85.         </div>
  86.         <?php 
  87.         }
  88.         }
  89.         ?>
  90.     </body>
  91. </html>
[PHP] pobierz, plaintext
Jeśli sama treść znajduje się w innym pliku niż layout strony, to nie ma to mniejszego znaczenia. Skrypty js umieszczamy wtedy pomiędzy znacznikami <head> i </head> w pliku z layoutem, a treść możemy dołączać za pomocą include.
Go to the top of the page
+Quote Post
seniu123
post 7.04.2010, 13:48:06
Post #15





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

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

Dzięki!!!! Wszystko działa teraz w najlepszym porządku smile.gif
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 Wersja Lo-Fi Aktualny czas: 14.08.2025 - 09:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn