例如我有 7 <div>
,我想每次在下一个按钮和上一个按钮单击时显示两个 div。如何使用 jQuery 做到这一点?
我有下一个代码,每次按下一个和上一个按钮时仅显示一个 div:
HTML
<div class="divs">
<div class="panel">1</div>
<div class="panel">2</div>
<div class="panel">3</div>
<div class="panel">4</div>
<div class="panel">5</div>
<div class="panel">6</div>
<div class="panel">7</div>
</div>
<a id="prev">prev</a>
<a id="next">next</a>
JS
$(document).ready(function(){
$(".divs div.panel").each(function(e) {
if (e != 0)
$(this).hide();
console.log(e);
});
$("#next").click(function(){
if ($(".divs div.panel:visible").next().length != 0)
$(".divs div.panel:visible").next().show().prev().hide();
else {
// $(".divs div.panel:visible").hide();
// $(".divs div.panel:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".divs div.panel:visible").prev().length != 0)
$(".divs div.panel:visible").prev().show().next().hide();
else {
// $(".divs div.panel:visible").hide();
// $(".divs div.panel:last").show();
}
return false;
});
});
我需要的是显示第1对和第2对、第3对和第4对等中的div
如果有人能帮助我那就太好了!
谢谢!
最佳答案
试试这个:
$(document).ready(function(){
$(".divs div.panel").each(function(e) {
if (e > 1)
$(this).hide();
console.log(e);
});
$("#next").click(function(){
if ($(".divs div.panel:visible:last").next().length != 0){
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:first").hide();
$(".divs div.panel:visible:first").hide();
}
else {
//either hide the next button or show 1st two again. :)
}
return false;
});
$("#prev").click(function(){
if ($(".divs div.panel:visible:first").prev().length != 0){
var curVisLen = $(".divs div.panel:visible").length;
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:last").hide();
if(curVisLen == 2){
$(".divs div.panel:visible:last").hide();
}
}
else {
//either hide the button or show last two divs
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="divs">
<div class="panel">1</div>
<div class="panel">2</div>
<div class="panel">3</div>
<div class="panel">4</div>
<div class="panel">5</div>
<div class="panel">6</div>
<div class="panel">7</div>
</div>
<a id="prev">prev</a>
<a id="next">next</a>
按照要求,它将显示成对的 div,但如果它们是奇数个 div,则对于最后一种情况,它将单独显示第 7 个 div。休息一下,一切似乎都工作正常。
模式将是-> 1 2 -> 3 4 -> 5 6 -> 7
在线示例:here
关于javascript - 使用 jQuery 使用 Next Previous 按钮显示隐藏情侣 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37865890/