Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Po kliknięciu przycisku zmień na następny div w kolejności
Forum PHP.pl > Forum > Przedszkole
grucha321
2.03.2013, 21:31:46
Cześć,
mam następujący problem:
mam np. 10 divów w których jest jakiś tekst,
chciałbym aby standardowo wyświetlił się tylko pierwszy div a po kliknięciu tekstu "Next" pierwszy div został zastąpiony następnym w kolejności. Po kliknięciu "Forward" div który się pojawił miałby być zastąpiony divem poprzedzającym go. Nie znam JavaScriptu a bardzo jest mi ten skrypt potrzebny. Jeśli nikt nie chciałby podać mi gotowca to prosiłbym chociaż o jakieś wyraźne wskazówki (dla kogoś kto zna PHP na poziomie podstawowym rozszerzonym smile.gif)

W internecie znalazłem coś takiego: 
[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div {display:none;}
  5. </style>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  7. <script type="text/javascript">
  8.     var ptr  = 0;
  9.     var step = 2;
  10.     var max  = 10;
  11.     function next() {
  12.         if((ptr * step) == max) return;
  13.         var current;
  14.         current= (ptr * step) + 1;
  15.         if(ptr > 0) {
  16.             for(i=current,j=current-1;i < current + 2;i++,j--) {
  17.                 $('#i-'+i).css('display','block');
  18.                 $('#i-'+j).css('display','none');
  19.             }
  20.         }else{
  21.             for(i=current;i < current + 2;i++) {
  22.                 $('#i-'+i).css('display','block');
  23.             }
  24.         }
  25.             ptr++;
  26.     }
  27.     function back() {
  28.         if(ptr==0) return;
  29.         var current = ptr * step;
  30.         if(ptr > 1) {
  31.             for(i= current , j= current-2; i > current - 2; i--,j--){
  32.                 $('#i-'+i).css('display','none');
  33.                 $('#i-'+j).css('display','block');
  34.             }
  35.         }else{
  36.             for(i= current; i > current - 2; i--)
  37.                 $('#i-'+i).css('display','none');
  38.         }
  39.             ptr--;
  40.     }
  41. </script>
  42. </head>
  43. <body>
  44. <input type="button" value="next" onclick="next()" />
  45. <input type="button" value="back" onclick="back()" />
  46. <div id="i-1">1</div>
  47. <div id="i-2">2</div>
  48. <div id="i-3">3</div>
  49. <div id="i-4">4</div>
  50. <div id="i-5">5</div>
  51. <div id="i-6">6</div>
  52. <div id="i-7">7</div>
  53. <div id="i-8">8</div>
  54. <div id="i-9">9</div>
  55. <div id="i-10">10</div>
  56. </body>
  57. </html>
[PHP] pobierz, plaintext

Jednak nie do końca chodzi mi o takie działanie.
Dzięki za odpowiedzi.

refresh

refresh
HuzarO
5.03.2013, 20:32:23
Witam, taki kod powinien być dobry, pamiętaj aby przed nim załadować jquery.

[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. var curr = 1;
  4.  
  5. function show() {
  6.     if(curr < 1) {
  7.         curr = 10;
  8.     }
  9.  
  10.     if(curr > 10) {
  11.         curr = 1
  12.     }
  13.     $('#result').html($('#i-' + curr).html());
  14. }
  15.  
  16. $(document).ready(function() {
  17.     show();
  18. });
  19. function next() {
  20.      curr++;
  21.  
  22.      show();
  23. }
  24.  
  25. function back() {
  26.      curr--;
  27.  
  28.      show();
  29. }
  30. </script>
  31.  
  32. <div id="result"></div>
  33.  
  34. <input type="button" value="next" onclick="next(); return false;" />
  35. <input type="button" value="back" onclick="back(); return false;" />
  36. <div id="i-1" style="display: none;">1</div>
  37. <div id="i-2" style="display: none;">2</div>
  38. <div id="i-3" style="display: none;">3</div>
  39. <div id="i-4" style="display: none;">4</div>
  40. <div id="i-5" style="display: none;">5</div>
  41. <div id="i-6" style="display: none;">6</div>
  42. <div id="i-7" style="display: none;">7</div>
  43. <div id="i-8" style="display: none;">8</div>
  44. <div id="i-9" style="display: none;">9</div>
  45. <div id="i-10" style="display: none;">10</div>
[PHP] pobierz, plaintext


Przepraszam że post pod postem, ale nie moge edytować poprzedniego. Oto rozwiązanie:

[HTML] pobierz, plaintext 
  1. <input id="next" type="button" value="next" onclick="next(); return false;" />
  2. <input id="prev" type="button" value="back" onclick="back(); return false;" />
  3.  
  4. <script type="text/javascript">
  5. function show() {
  6. if(curr < 1) {
  7. curr = 1;
  8. $('#prev').css('display', 'none');
  9. }
  10.  
  11. if(curr > 10) {
  12. curr = 10;
  13. $('#next').css('display', 'none');
  14. }
  15.  
  16. if(curr > 1 && curr < 10) {
  17. $('#prev').css('display', 'block');
  18. $('#next').css('display', 'block');
  19. }
  20. $('#result').html($('#i-' + curr).html());
  21. }
  22. </script>
[HTML] pobierz, plaintext


EDIT 03-05:

Tutaj jest kod który powinien działać:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  2.  
  3. <script type="text/javascript">
  4.  
  5. var curr = 1;
  6.  
  7. function show() {
  8. 	if(curr <= 1) {
  9. 		curr = 1;
  10. 		$('#prev').css('display', 'none');
  11. 	}
  12.  
  13. 	if(curr >= 10) {
  14. 		curr = 10;
  15. 		$('#next').css('display', 'none');
  16. 	}
  17.  
  18. 	if(curr > 1 && curr < 10) {
  19. 		$('#prev').css('display', 'inline');
  20. 		$('#next').css('display', 'inline');
  21. 	}
  22. 	$('#result').html($('#i-' + curr).html());
  23. }
  24.  
  25. $(document).ready(function() {
  26. 	show();
  27. });
  28. function nextt() {
  29. 	if(curr == 9) {
  30. 		$('#next').css('display', 'none');
  31. 	}
  32. 	curr++;
  33.  
  34. 	show();
  35. }
  36.  
  37. function back() {
  38. 	if(curr == 2) {
  39. 		$('#prev').css('display', 'none');
  40. 	}
  41. 	curr--;
  42.  
  43. 	show();
  44. }
  45. </script>
  46.  
  47. <div id="result"></div>
  48.  
  49. <img id="next" src="image.png" onclick="nextt(); return false;" />
  50. <img id="prev" src="image.png" onclick="back(); return false;" />
  51. <div id="i-1" style="display: none;">1</div>
  52. <div id="i-2" style="display: none;">2</div>
  53. <div id="i-3" style="display: none;">3</div>
  54. <div id="i-4" style="display: none;">4</div>
  55. <div id="i-5" style="display: none;">5</div>
  56. <div id="i-6" style="display: none;">6</div>
  57. <div id="i-7" style="display: none;">7</div>
  58. <div id="i-8" style="display: none;">8</div>
  59. <div id="i-9" style="display: none;">9</div>
  60. <div id="i-10" style="display: none;">10</div>
[HTML] pobierz, plaintext
[/html]
grucha321
5.03.2013, 22:08:39
Dzięki za ogromną cierpliwość i pomoc smile.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.