Mã HTML
<div class="smartcard-holder">
<div class="smartcard" id="smartcard-1" data-id='1' style="display: block;">
<p>First Options</p>
<input type="checkbox" />Product <br />
<input type="checkbox" />Product
</div>
<div class="smartcard" id="smartcard-2" data-id='2'>
<p>Second Options</p>
<input type="checkbox" />Product <br />
<input type="checkbox" />Product
</div>
<div class="smartcard" id="smartcard-3" data-id='3'>
<p>Third Options</p>
<input type="checkbox" />Product <br />
<input type="checkbox" />Product
</div>
<button type="button" class="back">Back</button>
<button type="button" class="next">Next</button>
</div>
<div class="end" data-id='4'>
<p>Congratulation! You are done!</p>
<button type="button" class="edit-previous">Edit Previous Options</button>
</div>
Mã jQuery
$('body').on('click', '.next', function() {
var id = $('.smartcard:visible').data('id');
var nextId = $('.smartcard:visible').data('id')+1;
$('[data-id="'+id+'"]').hide();
$('[data-id="'+nextId+'"]').show();
if($('.back:hidden').length == 1){
$('.back').show();
}
if(nextId == 4){
$('.smartcard-holder').hide();
$('.end').show();
}
});
$('body').on('click', '.back', function() {
var id = $('.smartcard:visible').data('id');
var prevId = $('.smartcard:visible').data('id')-1;
$('[data-id="'+id+'"]').hide();
$('[data-id="'+prevId+'"]').show();
if(prevId == 1){
$('.back').hide();
}
});
$('body').on('click', '.edit-previous', function() {
$('.end').hide();
$('.smartcard-holder').show();
$('#smartcard-3').show();
});
Ví dụ hoàn chỉnh để chọn phần tử tiếp theo và trước đó bằng cách sử dụng Jquery
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var statrtPagination = $("ul li").eq(0);
var width = statrtPagination.width();
$("#next").click(function(){
if(statrtPagination.is(':last-child')){
$(this).prop('disabled', true);
$("#prev").prop('disabled', false);
}
width+=50;
statrtPagination.css({"background-color" : '#DD4B39',
width : width + 'px'
});
statrtPagination = statrtPagination.next();
});
var endPagination = $("ul li").eq(-1);
width = endPagination.width();
$("#prev").click(function(){
if(endPagination.is(':first-child')){
$(this).prop('disabled', true);
}
width-=50;
endPagination.css({"background-color" : '#DD4B39',
width : width +'px'
});
endPagination = endPagination.prev();
});
});
</script>
<style>
ul{
font-family: monospace;
font-size: 15px;
font-family: monospace;
font-style: normal;
font-size-adjust: none;
width:auto;
}
ul li{
background-color:#ff9900;
width:100px;
margin:5px;
padding:5px;
list-style-type:none;
}
</style>
</head>
<body>
<h2>Jquery next() prev() functions</h2>
<div>
<ul>
<li>Laptop</li>
<li>Mobile</li>
<li>LCD</li>
<li>Iphone</li>
<li>Computer</li>
</ul>
</div>
</div>
<button id="next" class="btn">Next</button>
<button id="prev" class="btn" disabled>Prev</button>
</div>
</body>
</html>
Hy vọng bạn có ý tưởng về bản demo phân trang jquery với mã nguồn.
- Bài đăng blog này ban đầu được xuất bản tại: https://www.pakainfo.com
