Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery dodawanie elementów, jak dodawać?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
marcus755
28.08.2013, 15:27:45
jquery dodawanie elementów, jak dodawać?

mam np. 16 li (np. z klasą item)
chcę aby pierwsze 8 były widoczne na dzień dobry,
a reszta ukryta.
kliknięcie na link, powodowałoby pokazanie się kolejnych 4,
a kolejne kliknięcie w ten sam link następnych 4...

[HTML] pobierz, plaintext 
  1. <ul>
  2. <li class="jakstam"> 
  3. costam...
  4. </li>
  5. <li class="jakstam"> 
  6. costam...
  7. </li>
  8. <li class="jakstam"> 
  9. costam...
  10. </li>
  11. <li class="jakstam"> 
  12. costam...
  13. </li>
  14. <li class="jakstam"> 
  15. costam...
  16. </li>
  17. <li class="jakstam"> 
  18. costam...
  19. </li>
  20. <li class="jakstam"> 
  21. costam...
  22. </li>
  23. <li class="jakstam"> 
  24. costam...
  25. </li>
  26. <li class="jakstam"> 
  27. costam...
  28. </li>
  29. <li class="jakstam"> 
  30. costam...
  31. </li>
  32. <li class="jakstam"> 
  33. costam...
  34. </li>
  35. <li class="jakstam"> 
  36. costam...
  37. </li>
  38. <li class="jakstam"> 
  39. costam...
  40. </li>
  41. <li class="jakstam"> 
  42. costam...
  43. </li>
  44. <li class="jakstam"> 
  45. costam...
  46. </li>
  47. <li class="jakstam"> 
  48. costam...
  49. </li>
  50. </ul>
  51.  
  52. <a id="nastepne" href="#"></a>
[HTML] pobierz, plaintext


Ktoś ma jakiś pomysł?
_Borys_
28.08.2013, 16:38:19 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 	<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
  5. 	<script src="../jQuery1_9_min.js" id="jquery"></script> <!-- tu zmiana -->
  6.     <style type="text/css">
  7. 	.visible{
  8. 	   display: list-item;
  9. 	}
  10.     .unvisible{
  11.         display: none;
  12.     }
  13. </style>
  14.     <script type="text/javascript">
  15. 	$(function(){
  16. 	   $('#nastepne').bind('click', function(){
  17.           var j = 4;
  18. 	      $('ul li').each(function(){
  19. 	       if($(this).hasClass('unvisible')){
  20. 	         $(this).removeClass('unvisible').addClass('visible');
  21.              j--;
  22.              if(!j){
  23.                 return false;
  24.            }  
  25. 	       }
  26.            });
  27. 	            return false;
  28. 	      });
  29.           });  
  30. </script>
  31. </head>
  32.  
  33. <body>
  34.  
  35. <ul>
  36. <li class="visible"> 
  37. costam...
  38. </li>
  39. <li class="visible"> 
  40. costam...
  41. </li>
  42. <li class="visible"> 
  43. costam...
  44. </li>
  45. <li class="visible"> 
  46. costam...
  47. </li>
  48. <li class="unvisible"> 
  49. costam...
  50. </li>
  51. <li class="unvisible"> 
  52. costam...
  53. </li>
  54. <li class="unvisible"> 
  55. costam...
  56. </li>
  57. <li class="unvisible"> 
  58. costam...
  59. </li>
  60. </ul>
  61.  
  62. <a id="nastepne" href="#">Clik</a>
  63.  
  64. </body>
  65. </html>
[HTML] pobierz, plaintext
marcus755
29.08.2013, 14:48:56
Wielkie dzięki za pomoc:-)
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.