隱藏許多按鈕與下一個和預覽按鈕

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