wyświetlanie kolejno divów

pytanie zadane 3 grudnia 2017 w JavaScript przez gunaterek Bywalec (2,760 p.)
zamknięte 3 grudnia 2017 przez gunaterek

Czy da sie przerobic tak ten skrypt zeby po wcisnieciu show wyswietlil sie 1 div i za kazdym razem zeby wyswietlał sie kolejny i zeby sie dalo tez je chowac pojedynczo ? daze do tego zeby dalo sie przewijac np artykuly. chyba ze jest jakas lepsza funkcja do tego .Od razu mowie jestem poczatkujacy i javy jeszcze nie poznalem dlatego pytam bo walcze z tym i walcze.

https://codepen.io/anon/pen/xPMQYj

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  div {
    background: #def3ca;
    margin: 3px;
    width: 80px;
    display: none;
    float: left;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
 
<script>
$( "#showr" ).click(function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
});
 
$( "#hidr" ).click(function() {
  $( "div" ).hide( 1000 );
});
</script>
 
</body>
</html>

pozdrawiam

komentarz zamknięcia: rozwiazany problem

1 odpowiedź

odpowiedź 3 grudnia 2017 przez Chess Szeryf (76,730 p.)
wybrane 3 grudnia 2017 przez gunaterek

Najlepsza

.myclass{ 
	background:green;
	width:200px;
	height:10px;
	margin-top:5px;
}

<body style="background:grey">


<div class="myclass" style="display:none">0</div>
<div class="myclass"  style="display:none">1</div>
<div class="myclass"  style="display:none">2</div>
<div class="myclass" style="display:none">3</div>
<div class="myclass" style="display:none">4</div>
<div class="myclass" style="display:none">5</div>

<button id="btn">click</button>
<button id="btn2">click2</button>

<script src="my_script_js.js"></script>

</body>

var get_elements = document.querySelectorAll('.myclass');

var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');

var i=0;
function shows(){ 
	 
	get_elements[i].style.display = 'block';
	
	if(i>=get_elements.length-1){
		null;
	}else{ 
		i++;
	}
}
 
function hides(){ 

	 get_elements[i].style.display = 'none';
	 
	 if(i<=0){
	 	null;
	 }else{ 
		i--;
	 }
	
}


btn.addEventListener('click',shows,false);
btn2.addEventListener('click',hides,false);