jQuery添加一個類並在元素上循環

Question

我有這樣的列表元素集

<ul>
    <li class="first"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<div class="prev">PREVIOUS</div>
<div class="next">NEXT</div>

我需要在第二個和第三個li上添加一個active班級，然后單擊下一步按鈕，這兩個班級將在列表中向下移動一個，移至第三和第四個列表，直到它們到達最后一個li。 同樣，當我單擊上一個按鈕時，課程將在列表中上移。

所以當我的頁面加載時，我需要這樣：

<ul>
    <li class="first"></li>
    <li class="active"></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<div class="prev">PREVIOUS</div>
<div class="next">NEXT</div>

然后，當我單擊下一步按鈕時

<ul>
    <li class="first"></li>
    <li></li>
    <li class="active"></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<div class="prev">PREVIOUS</div>
<div class="next">NEXT</div>

等等。 到目前為止，我有：

$(window).load( function(){

var ul = $('ul'),
    li = ul.find('li');

var $prev=$('prev');
var $next=$('next');

li.eq(1).addClass('active');
li.eq(2).addClass('active');

$next.on('click', function(){
    if(li.hasClass('active')){
        li.removeClass('active');
    }
////stuck    

});

});

我已經嘗試過僅使用.next().addClass('active') ，但這只是在所有列表項上添加了active類，我不需要。

在刪除和添加類之間也可以有一些延遲嗎？ 我正在用它作為旋轉木馬。 接下來，我的整個未排序列表將向左移動一些像素，並且可以正常工作。 我需要添加類，以便除了具有active類的那些對象之外，都可以降低所有對象的不透明度，因此我需要進行平滑過渡。

任何幫助表示贊賞。

Answer 1

首先，選擇器$('prev')和$('next')試圖匹配具有標記名prev和next元素。 您的意思是.prev和.next 。

Previous很容易，您只需要對活動列表項進行.filter() ，刪除該類，遍歷到上一個元素，然后將其添加回去：

$prev.on('click', function(){
    li.filter('.active').removeClass('active').prev().addClass('active');
});

接下來是（有點）棘手的問題，因為我們需要首先反轉我們的jQuery對象：

$next.on('click', function(){
    $(li.get().reverse()).filter('.active').removeClass('active').next().addClass('active');
});

JSFiddle

Answer 2

更新以使其也包括最后一個和第一個li

這是另一種方式。 您可以簡單地檢查下一個或上一個元素的類是first還是last ，如果有，則不要更改類。

 var ul = $('ul'), li = ul.find('li'); var $prev = $('.prev'); var $next = $('.next'); li.eq(1).addClass('active'); li.eq(2).addClass('active'); $next.on('click', function() { var $a = $('.active'); if (!$($a[0]).next().hasClass('last')) // check if the first active li has next as last $a.removeClass('active').next().addClass('active'); }); $prev.on('click', function() { var $a = $('.active'); if (!$($a[1]).prev().hasClass('first')) // check if the last active li has prev as first $a.removeClass('active').prev().addClass('active'); }); 

 .active { background: lightblue !important; } .first, .last { background: red; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li class="first"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="last"></li> </ul> <div class="prev">PREVIOUS</div> <div class="next">NEXT</div> 

Answer 3

對您的問題和我的解決方案提出了疑慮 :)

添加了以下內容：

var pointer = 1;

固定（缺少點）：

var $prev=$('.prev');
var $next=$('.next');

更新了此：

li.eq(pointer).addClass('active');
li.eq(pointer+1).addClass('active');

並更新了您的上一個/下一個：

$next.on('click', function(){
  if(li.hasClass('active')){
      li.removeClass('active');
  }
  pointer++;

  li.eq(pointer).addClass('active');
  li.eq(pointer+1).addClass('active');
});

Answer 4

嘗試這個 ：

$(document).ready( function(){
    var len = $('ul li').length;
    $('.prev').click(function(){
        if($('.active:first').index()!=0)
        {   
         $('.active').each(function(){            
            $(this).removeClass('active').prev('li').addClass('active');
        });
        }
    });

    $('.next').click(function(){
        if($('.active:last').index()!=(len - 1))
        {
          $('.active').each(function(){

          $(this).next('li').addClass('active');
        });
            $('.active:first').removeClass('active');    
        }
    });
});

演示

Answer 5

另一種方式

var ul = $('ul'),
    li = ul.find('li');

var $prev=$('.prev');
var $next=$('.next');

li.eq(1).addClass('active');
li.eq(2).addClass('active');

$next.on('click', function(){
    var lil = $("li.active:last").not(".last");
    lil.prev().toggleClass("active");
    lil.next().toggleClass("active");
});
$prev.on('click', function(){
    var lil = $("li.active:first").not(".first");
    lil.prev().toggleClass("active");
    lil.next().toggleClass("active");
});

http://jsfiddle.net/098p4fLa/