使用next和以前的按钮在多个div中导航。
使用next和以前的按钮在多个div中导航。
提问于 2015-04-18 16:33:34
我已经找到了解决这个问题的方法，但是我对JQuery还不熟悉。
如何更改它，以便我可以一次显示三个div，当单击下一个或先前的按钮时，它前进1，而不是一次只显示一个。
这是我看到的JS Fiddle：
http://jsfiddle.net/TrueBlueAussie/aVJBY/468/
这是JQuery：
function updateItems(delta)
{
var $items = $('#group').children();
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$("#prev").toggle(!$current.is($items.first()));
$("#next").toggle(!$current.is($items.last()));
}
$("#next").click(function () {
updateItems(1);
});
$("#prev").click(function () {
updateItems(-1);
});
// Cause initial selection
updateItems(0);回答 3
Stack Overflow用户
回答已采纳
发布于 2015-04-18 17:21:08
你可以这样做，它的工作很好，但另一方面，我也确定可能有一种方法是更优化的。
// give each div an id "#child1", "#child2", etc.
$("#group div").each(function(i) {
$(this).attr('id', "child" + (i + 1));
});
var First = 1;
var Second = 2;
var Third = 3;
$('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
// on next click, add +1 to First, Second and Third
$('#next').click(function(){
if( !$('#child'+First).is(':last-child') ) {
$("#group div").removeClass('current');
First++;
Second++;
Third++;
$('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
}
});
$('#prev').click(function(){
if( !$('#child'+Third).is(':first-child') ) {
$("#group div").removeClass('current');
First--;
Second--;
Third--;
$('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
}
});在这里查看：http://jsfiddle.net/aVJBY/551/
编辑：以这种方式添加了if(!$('#child'+First).is(':last-child'))和if(!$('#child'+Third).is(':first-child'))，至少第一个或最后一个div是可见的
Stack Overflow用户
发布于 2015-04-18 16:52:33
您可以给每个div输入id，并使用jquery单击next，您可以获得哪个输入具有活动类并获得它的id，然后，如果您想返回，可以通过向div名称添加+1和-1设置焦点来设置下一个输入id。
并记住相应地移动类名。
您可以使用这些jquery函数来完成它。
var active_div = $( .active );
$( P_active_div_id ).removeClass( "active" );
$( N_active_div_id ).addClass( "active" );
$( "#target" ).focus();我希望这能帮上忙
Stack Overflow用户
发布于 2015-04-18 20:29:33
试着利用.slice()
var group = $("#group")
, items = group.children().eq(0).addClass("current").addBack()
, buttons = $("#next, #prev")
, prev = buttons.filter("#prev").hide(0)
, next = buttons.filter("#next");
buttons.on("click", function (e) {
var button = $(this)
, idx = function (index) {
return items.filter(".current").eq(index).index()
}
, _toggle = function (start, stop) {
$(".current").hide(0, function () {
$(this).removeClass("current");
items.slice(start, stop)
.addClass("current").show(0);
prev.toggle(start > 0);
next.toggle(stop < items.length)
})
};
if (button.is(next) && idx(-1) + 4 <= items.length) {
_toggle(idx(-1) + 1, idx(-1) + 4)
} else if (button.is(prev) && idx(0) !== 0) {
_toggle(idx(0) === 1 ? 0 : idx(0) - 3, idx(0))
};
});#group div {
display: none;
}
#group div.current {
display: block;
border: 1px solid red;
}
#next, #prev {
width: 100px;
height 40px;
border: 1px solid blue;
}
#next {
float: right;
}
#prev {
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="group">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
</div>
<div id="next">next</div>
<div id="prev">prev</div>
jsfiddle http://jsfiddle.net/q1quarfk/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29719949
复制相关文章
相似问题
腾讯云开发者
