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

除了前两个按钮之外，最初隐藏每个按钮。

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

隐藏下一个按钮和预览按钮

2 个答案: