如何使用按钮单击显示和显示div？
[英]how to show and show div using button click?
问题描述
could you please tell me how to show next div on button click next button .and show previous div on click of previous button . 
你能告诉我如何显示下一div上单击按钮next按钮。而显示以前的div上的点击previous按钮。
https://jsbin.com/zeleloxifo/edit?html,css,js,output https://jsbin.com/zeleloxifo/edit?html,css,js，输出
I have 5 divs .First time first div is display .When user click on next button it should show second div and hide first div .Then user click again it hide second div and show third div ..so on.. when user click on previous it show previous div` 我有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()
})
})
1 个解决方案
解决方案1
2 已采纳 2017-03-06 17:10:49
Use a helping counter variable, which will hold an information what is the index of actually displayed image. 使用帮助计数器变量，该变量将保存一条信息，该信息是实际显示的图像的索引。 Then, use eq() function to show the image of with current index. 然后，使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.