jQuery循环上一页下一页 [英] jQuery looping prev next

问题描述

我发现这部分代码在搜寻基本的滑块并且其位置足够近时我想要什么，但是我希望它在到达最后一个li时循环播放，即，如果单击了最后一个li和下一个按钮，则循环到1st并继续，

感谢所有帮助，并且一如既往地感谢您.

$('.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>

解决方案

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

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/

---

编辑:我忘了用小提琴中的修订版本更新答案.固定.

I found this bit of code whist searching for a basic slider and its near enough does what I want but I would like it to loop once it got to the last li, i.e if last li and next button is clicked loop to 1st and continue,

all help is appreciated and as always thanks in advance.

$('.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>

解决方案

Your code can be greatly simplified like this:

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

Also more efficient because the .udtalelse elements are cached.

Example: http://jsfiddle.net/3z9uc/

---

EDIT: I forgot to update the answer with the revision that's in the fiddle. Fixed.

这篇关于jQuery循环上一页下一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！