如何爲滑塊的分頁按鈕創建簡單的next和prev觸發按鈕？

Question

我試圖在點擊按鈕時在li的組合each()和eq()之間進行一個類。我使用與上一個和下一個按鈕相同的代碼，除了i+1和i-1，但它返回了我不同的問題。

Here is jsFiddle to examine.

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

如果由於某種原因，你需要的指數，你總是可以做：

$('.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'); 
});​ 

FIDDLE

如果不是：

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

FIDDLE

Answer 2

你應該return false;你發現自己的一流的active後： http://jsfiddle.net/ufomammut66/np4Pt/

發生什麼事情就是你重複前進的元素並按順序改變每一個元素。因此，當你瀏覽每個案例時，你將下一個順序設置爲活動狀態，從而使下一個$(this).hasClass('active')檢查爲真。這就是爲什麼prev事件正在工作，我們正在以循環的相反順序移動。所以我們只需要在找到我們的活動案例後停止迭代我們的集合。

編輯1

你可以使用任何.length選擇的對象得到多少返回。因此，在您提供的示例代碼中，我們可以使用li.length來獲取頁面上有多少個li元素。你可能想要使用類選擇器來確保其他li元素不被用來計算你的天花板。我更新了jsFiddle以反映這些變化。

Answer 3

我會嘗試使用更多的東西一樣：

Here is working 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'部分放上一個班級，並將你的班級列爲：「。myList中禮」

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

Try the following updated 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'); 
    } 
}); 

這將循環各地積極最後一個元素（如果以前在第一）和第一個元素活躍的（如果下次在最後一個）。