使用下一个和上一个按钮浏览多个div

Question

我已经找到了解决方案，但我是JQuery的新手。

如何更改它，以便我可以一次显示三个div，并且单击下一个或上一个按钮时，它将前进1而不是一次仅显示一个。

这里是JS小提琴我看：

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); 

Answer 1

你可以这样说，它的工作原理很好，但另一方面，我也相信可能有一种更优化的方式。

// 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可见

Answer 2

你可以给每个格输入ID和使用下次你的jQuery购买点击可以得到哪个输入具有活动类并获取它的id，然后可以通过向div名称添加+1以及如果要返回则设置-1 setfoces来设置下一个。

记住移动类的名称将相应

您可以使用这些jQuery函数做

var active_div = $(.active); 
$(P_active_div_id).removeClass("active"); 
$(N_active_div_id).addClass("active"); 
$("#target").focus(); 

我希望这将有助于

Answer 3

尝试利用.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/