how to show and show div using button click?
Question
could you please tell me how to show next div on button click next button .and show previous div on click of previous button .
https://jsbin.com/zeleloxifo/edit?html,css,js,output
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`
$(function(){
$('#pre').click(function(){
alert('pre');
$('.imageBlock').hide();
$('.imageBlock').show()
})
$('#next').click(function(){
alert('next');
$('.imageBlock').hide();
$('.imageBlock').show()
})
})
1 answers
solution1
2 ACCPTED 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.
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.