jquery單擊下一個和上一個單獨的容器

Question

我再次發佈這個小提琴，因爲我有一個新的問題。

這裏是小提琴：http://jsfiddle.net/XvAR6/

現在，我想添加一個新的容器。當我點擊下一個/上一個時，只有底部容器的選項卡應該改變，這應該單獨爲他們兩個人發生。

我嘗試這樣做：

HTML

<div class='container1'> 

<span class="kunderpagination"> 
    <a href="#" id="prev">« Previous</a> | 
    <a href="#" id="next">Next »</a> 
</span> 

<ul class="kunder"> 
    <li> 
     <span class="udtalelse"> 
      <div id="tab1"> 
       <ul> 
       <li><a href="#fragment-1"><span>One</span></a></li> 
       <li class="active"><a href="#fragment-2"><span>Two</span></a></li> 
       <li><a href="#fragment-3"><span>Three</span></a></li> 
       </ul> 
       <div id="fragment-1"> 
        1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
       <div id="fragment-2"> 
       2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
       <div id="fragment-3"> 
       3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
      </div> 
     </span> 
    </li> 
    <li> 
     <span class="udtalelse"> 
       <div id="tab2"> 
       <ul> 
       <li><a href="#fragment-4"><span>Four</span></a></li> 
       <li class="active"><a href="#fragment-5"><span>Five</span></a></li> 
       <li><a href="#fragment-6"><span>Six</span></a></li> 
       </ul> 
       <div id="fragment-4"> 
        4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat 
       </div> 
       <div id="fragment-5"> 
       5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
       <div id="fragment-6"> 
       6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
      </div> 
     </span> 
    </li> 
    <li> 
     <span class="udtalelse"> 
      3 
     </span> 
    </li> 
</ul> 

</div> 

<div class='container2'> 

<span class="kunderpagination2"> 
    <a href="#" id="prev">« Previous</a> | 
    <a href="#" id="next">Next »</a> 
</span> 

<ul class="kunder2"> 
    <li> 
     <span class="udtalelse"> 
      <div id="tab3"> 
       <ul> 
       <li><a href="#fragment-7"><span>One</span></a></li> 
       <li class="active"><a href="#fragment-8"><span>Two</span></a></li> 
       <li><a href="#fragment-9"><span>Three</span></a></li> 
       </ul> 
       <div id="fragment-7"> 
        1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
       <div id="fragment-8"> 
       2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
       <div id="fragment-9"> 
       3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
      </div> 
     </span> 
    </li> 
    <li> 
     <span class="udtalelse"> 
       <div id="tab4"> 
       <ul> 
       <li><a href="#fragment-10"><span>Four</span></a></li> 
       <li class="active"><a href="#fragment-11"><span>Five</span></a></li> 
       <li><a href="#fragment-12"><span>Six</span></a></li> 
       </ul> 
       <div id="fragment-10"> 
        4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
       <div id="fragment-11"> 
       5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
       <div id="fragment-12"> 
       6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       </div> 
      </div> 
     </span> 
    </li> 
    <li> 
     <span class="udtalelse"> 
      3 
     </span> 
    </li> 
</ul> 

</div> 

和jQuery：

$("#tab1, #tab2, #tab3, #tab4").tabs({active: 1}).tabs({ 
     collapsible: false, 
     hide: { 
      effect: "slideUp", 
      duration: 500 
     }, 
     show: { 
      effect: "slideDown", 
      duration: 500 
     } 
    }); 

var all = $('.udtalelse').addClass("passiv"); 

var i = -1; 

$('#prev').click(function(e) { 
    e.preventDefault(); 
    ctrlKunder(i = !i ? all.length - 1 : --i); 
}); 
$('#next').click(function(e) { 
    e.preventDefault(); 
    ctrlKunder(i = ++i % all.length); 
}).click(); 

function ctrlKunder(ele) { 
    all.removeClass("active").addClass("passiv"); 
    all.eq(ele).removeClass("passiv").addClass("active"); 
} 

有人能告訴我什麼是錯在我的代碼，爲什麼第二個不工作

Answer 1

錯誤是因爲您必須在元素上使用唯一的ID。解決方案是在kunderpagination和kunderpagination2中將按鈕從使用id更改爲class。可選地，您應該更改kunderpagination和kunderpagination2以使用ID而不是類，但這只是一個建議，因爲這不會導致任何問題。

這個變化兩次出現：

<a href="#" id="prev">« Previous</a> | 
<a href="#" id="next">Next »</a> 

這樣：

<a href="#" class="prev">« Previous</a> | 
<a href="#" class="next">Next »</a> 

1. 而更新jQuery代碼選擇類，而不是的ID。

改變這一點：

$('#prev').click(function(e) { 
    e.preventDefault(); 
    ctrlKunder(i = !i ? all.length - 1 : --i); 
}); 

$('#next').click(function(e) { 
    e.preventDefault(); 
    ctrlKunder(i = ++i % all.length); 
}).click(); 

這樣：

$('.prev').click(function(e) { 
    e.preventDefault(); 
    ctrlKunder(i = !i ? all.length - 1 : --i); 
}); 
$('.next').click(function(e) { 
    e.preventDefault(); 
    ctrlKunder(i = ++i % all.length); 
}).click(); 

你新的工作小提琴： http://jsfiddle.net/acturbo/xNFgs/