jQuery 循环 prev next答案

【问题标题】：jQuery looping prev nextjQuery 循环 prev next
【发布时间】：2011-09-27 11:38:39
【问题描述】：

我发现this bit of code whist 正在搜索一个基本滑块，它足够接近我想要的，但我希望它在到达最后一个 li 时循环，即如果最后一个 li 和下一个按钮被点击循环到第一个和继续，

感谢所有帮助，并一如既往地提前致谢。

$('.udtalelse').addClass("passiv");
ctrlKunder(0);

$('#prev').click(function() {
    var index = getActive();
    if (index == 0) return;
    index--;
    ctrlKunder(index);
})
$('#next').click(function() {
    var index = getActive();
    if (index == $('.udtalelse').length - 1) return;
    index++;
    ctrlKunder(index);
})

function ctrlKunder(ele) {
    $('.udtalelse').removeClass("active").addClass("passiv");
    $('.udtalelse').eq(ele).removeClass("passiv").addClass("active");
}

function getActive() {
    var index;
    $('.udtalelse').each(function(i) {
        if ($(this).hasClass("active")) index = i;
    })
    return index;
}

<ul class="kunder">
    <li><span class="udtalelse">Indhold 1</span></li>
    <li><span class="udtalelse">Indhold 2</span></li>
    <li><span class="udtalelse">Indhold 3</span></li>
</ul>
<span class="kunderpagination">
    <a href="#" id="prev">« Previous</a> |
    <a href="#" id="next">Next »</a>
</span>

【问题讨论】：

标签： jquery loops next

【解决方案1】：

将其更改为：

        $('#next').click(function(){
            var index = getActive();
            if(index == $('.udtalelse').length - 1) { 
                index = 0; 
            } else { 
                index++;
            }
            ctrlKunder(index);

如果你想在以前的版本中使用相同的包装：

        $('#prev').click(function(){
            var index = getActive();
            if(index == 0) {
                $index = $('.udtalelse').length - 1;
            } else {
                index--;
            }
            ctrlKunder(index);
        })

【讨论】：

【解决方案2】：

您的代码可以像这样大大简化：

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

var i = -1;

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

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

由于缓存了.udtalelse 元素，因此效率也更高。

示例： http://jsfiddle.net/3z9uc/

编辑：我忘了用小提琴中的修订更新答案。固定。

【讨论】：

请问另一个click()在这个click()后面做了什么：$('#next').click(function();