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，然后当我点击下一个按钮时，这两个类将在列表中向下移动一个，到第三个和第四个列表，直到它们达到最后的李。此外，当我点击上一个按钮时，类会向上移动列表。

所以当我的页面加载时我需要这个：

<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。

上一页很简单，您只需要.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

这是另一种方式。您可以简单地检查 next 或 previous 元素是否具有类或 last 类，并且不更改类if他们是这样。

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

根据您的问题和我的解决方案制作FIDDLE：）

添加了以下内容：

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

<强> DEMO

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/

jquery添加一个类并在元素上循环

5 个答案: