如何為滑塊的分頁按鈕創建簡單的下一個和上一個觸發按鈕？

Question

我試圖通過單擊按鈕時在li之間使用結合each()和eq()方法來攜帶一個類。 除了i+1和i-1之外， i+1在上一個和下一個按鈕上使用的是相同的代碼，但它給我帶來了不同的問題。

這是要檢查的jsFiddle。

的HTML：

<span class="prev">prev</span>
<ul>
    <li>0</li>
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span class="next">next</span>

jQuery的：

var li = $('li');

$('.prev').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            li.removeClass('active');
            li.eq(i-1).addClass('active');
            //this is working better
            //problem is: not selecting 4
        }
    });
});

$('.next').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            //problem starts:
            //li.removeClass('active');
            //when this is active; all active classes are gone

            li.eq(i+1).addClass('active');
            //try to select next 'li' here
            //but it is selecting all li's bigger than current value
        }
    });
});

Answer 1

我會嘗試使用更多類似的東西：

這是工作的jsFiddle。

$(".next").click(function(){
    if($("li.active").next().length > 0){
        $("li.active").removeClass("active").next("li").addClass("active");
    }
});
$(".prev").click(function(){
    if($("li.active").prev().length > 0){
        $("li.active").removeClass("active").prev("li").addClass("active");
    }
});​

使用“下一個”選擇器： jQuery Next

我會盡可能避免數學運算。 很難計數：-)。 就是說，我認為您上面的問題可能與索引有關。 很難說。 處理這樣的列表時，我會避免使用“ li”之類的選擇器。 嘗試在該類的“ ul”部分放置一個類，並將您的li命名為：“ .myList li”

Answer 2

您應該return false; 在您找到第一類active ： http : //jsfiddle.net/ufomammut66/np4Pt/

發生的事情是您迭代前進的元素並按順序更改每個元素。 因此，當您遍歷每種情況時，將下一個依次設置為活動狀態，這又會使下一個$(this).hasClass('active')檢查為true。 這就是為什么prev事件起作用的原因，我們以循環的相反順序進行移動。 因此，我們只需要在找到活動案例后就停止對集合進行迭代。

編輯1

您可以在任何選定對象上使用.length來獲取返回的數量。 因此，在您提供的示例代碼中，我們可以使用li.length來獲取頁面上有多少li元素。 您可能想使用類選擇器只是為了確保不使用其他li元素來計算您的上限。 我已經更新了jsFiddle以反映這些更改。

Answer 3

如果出於某種原因需要索引，則可以始終執行以下操作：

$('.prev').on('click', function() {
    var i = $(".active").index();
        i--;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});

$('.next').on('click', function() {
    var i = $(".active").index();
        i = i >= $('li').length-1 ? 0 : i+1;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});​

小提琴

如果不 ：

$('.prev, .next').on('click', function() {
    if ($(".active")[$(this).attr('class')]().index()!=-1)
    $(".active").removeClass('active')[$(this).attr('class')]().addClass('active');
});

小提琴

Answer 4

您甚至可以嘗試：

$('.prev').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are prev li
    if(!$(el).prev().is(':first')) $(el).removeClass('active').prev().addClass('active');
});

$('.next').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are next li
    if(!$(el).next().is(':last')) $(el).removeClass('active').next().addClass('active');
});

Answer 5

嘗試以下更新的jsFiddle ：

var li = $("li");

$(".prev").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index();

    $(activeLI).removeClass('active');

    if (index > 0) {
        $(activeLI).prev().addClass('active');
    } else {
        $(li).last().addClass('active');
    }
});

$(".next").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index() + 1;

    $(activeLI).removeClass('active');

    if (index < li.length) {
        $(activeLI).next().addClass('active');
    } else {
        $(li).first().addClass('active');
    }
});

這將循環到最后一個元素處於活動狀態（如果前一個在前）和第一個元素處於活動狀態（如果下一個在后一個）。