如何使用按钮单击显示和显示div？

Question

你能告诉我如何显示下一div上单击按钮next按钮。而显示以前的div上的点击previous按钮。

https://jsbin.com/zeleloxifo/edit?html,css,js，输出

我有5 div的。第一时间first格是上显示。当用户点击next按钮，它应该显示second格和隐藏first div的。然后用户点击它再次隐藏second股利和显示third格..所以..上when user click on上一个it show previous div`

$(function(){

  $('#pre').click(function(){
    alert('pre');
    $('.imageBlock').hide();
     $('.imageBlock').show()
  })

  $('#next').click(function(){
    alert('next');
     $('.imageBlock').hide();
    $('.imageBlock').show()
  })

})

Answer 1

使用帮助计数器变量，该变量将保存一条信息，该信息是实际显示的图像的索引。 然后，使用eq()函数显示具有当前索引的图像。

 $(function() { var counter = 0; $('.currentPage').text(counter+1); $('#pre').prop('disabled', true); $('#next').click(function() { if (counter < 4) { counter++; $('.imageBlock').hide(); $('.imageBlock').eq(counter).show(); } $('.currentPage').text(counter+1); }) $('#pre').click(function() { if (counter > 0) { counter--; $('.imageBlock').hide(); $('.imageBlock').eq(counter).show(); } $('.currentPage').text(counter+1); }) $('#next, #pre').click(function() { if (counter == 0) { $('#pre').prop('disabled', true); } else if (counter == 4) { $('#next').prop('disabled', true); } else { $('#pre').prop('disabled', false); $('#next').prop('disabled', false); } }) })

 div.imageBlock { width: 100px; height: 100px; border: 1px solid }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <body> <div class="slideno"> <span class="currentPage"> </span>/<span class="totalPage">5 </span></div> <div class="imageBlock">1</div> <div class="imageBlock" style="display:none">2</div> <div class="imageBlock" style="display:none">3</div> <div class="imageBlock" style="display:none">4</div> <div class="imageBlock" style="display:none">5</div> <button id="next">next</button> <button id="pre">pre</button> </body> </html>

如何使用按钮单击显示和显示div？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-03-06 17:10:49

如何使用按钮单击显示和显示div？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-03-06 17:10:49

解决方案1
2 已采纳 2017-03-06 17:10:49