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

不能在jquery上使用prev item和next item链接

2 个答案: