隐藏许多按钮与下一个和预览按钮

Question

我有十个按钮与下一个和前一个按钮， 当我点击下一个按钮，它应该显示下两个按钮（隐藏其余）。 单击前一个按钮时会出现相反情况（显示前两个按钮（隐藏其余按钮））。

谢谢。

我的HTML代码是：

<div> 
<button class="menu">M1</button> 
<button class="menu">M2</button> 
<button class="menu">M3</button> 
<button class="menu">M4</button> 
<button class="menu">M5</button> 
<button class="menu">M6</button> 
<button class="menu">M7</button> 
<button class="menu">M8</button> 
<button class="menu">M9</button> 
<button class="menu">M10</button> 
</div> 
<div> 
<button class="action" id="btnNext">Next</button> 
<button class="action" id="btnPreview">Previous</button> 
</div> 

Answer 1

最初使每个按钮隐藏除了第2位。

$("#btnNext").on('click', function(){ 
    var vBtn = $(".menu:visible:last"); 
    $(".menu").hide(); 
    vBtn.next().show(); 
    vBtn.next().next().show(); 
}); 

$("#btnPreview").on('click', function(){ 
    var vBtn = $(".menu:visible:first"); 
    $(".menu").hide(); 
    vBtn.prev().show(); 
    vBtn.prev().prev().show(); 
}); 

Answer 2

我手工编写没有测试请

$("button.menu").not(':eq(0),:eq(1)').hide(); 
var count = 1; 
$("#btnNext").click(function() { 
     $("button.menu").hide(); 
     count = count + 2; 
     $("button.menu").eq(count-1).show(); 
     $("button.menu").eq(count).show(); 
}); 

$("#btnPreview").click(function() { 
     $("button.menu").hide(); 
     count = count - 2; 
     $("button.menu").eq(count-1).show(); 
     $("button.menu").eq(count).show(); 
});