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/