对于单个容器，单击“下一个”和“上一个”。

Question

我再次张贴这个小提琴，因为我有一个新的问题。

这里是小提琴：http://jsfiddle.net/XvAR6/

现在，我想添加一个新的容器。当我点击next/previous时，只有底部容器的标签应该会改变，这应该会分别发生在这两个容器中。

我试过这个：

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

错误是因为您必须在元素上使用唯一的is。或者，您可能应该将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/