无法在jQuery上使用上一个项目和下一个项目链接

Question

我正在尝试遍历两项，上一项和下一项。 最初可以使用，但是当我循环到下一个项目时，我无法返回上一个项目。 知道为什么吗？

HTML

<section class="st" id="item1">
Item 1<p>
    <a id="prevItem" href="#">Previous Item</a>
    <a id="nextItem" href="#">Next Item</a>
</section>

<section class="st" id="item2">
Item 2
    <p>
    <a id="prevItem" href="#">Previous Item</a>
    <a id="nextItem" href="#">Next Item</a>
</section>

JS

$("#item2").hide()
$("#nextItem").click(function(){        
    if($('#item1').is(':visible')) {
        $("#item1").hide();
        $("#item2").show();
    }
    else if($('#item2').is(':visible')) {
        $("#item1").show();
        $("#item2").hide();
    }
});

jsfiddle在这里： http : //jsfiddle.net/by0bze5e/

Answer 1

您不能有两个具有相同id元素，并且不能期望它起作用。 将它们更改为类，很可能会正常工作。

<a class="prevItem" href="#">Previous Item</a>
<a class="nextItem" href="#">Next Item</a>

$("#item2").hide()
$(".nextItem").click(function(){        
    $("#item1, #item2").toggle();
});

http://jsfiddle.net/by0bze5e/2/

Answer 2

您必须在HTML页面上具有唯一的ID才能使其有效。 使用类代替按钮：

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/by0bze5e/4/

$("#item2").hide()
$(".prevItem").click(function(){        
    if($('#item1').is(':visible')) {
        $("#item1").hide();
        $("#item2").show();
    }
    else if($('#item2').is(':visible')) {
        $("#item1").show();
        $("#item2").hide();
    }
});