Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][jQuery] Problem z dynamicznym rozwijaniem treści
seniu123
post
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:

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


Z góry dzięki za pomoc (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
mortus
post
Post #2





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
  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>
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

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 15.10.2025 - 23:44