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