javascript - 无法在 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/