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

jquery add a class and cycle it on the elements

本文关键字：元素 循环 一个 添加 jQuery      更新时间：2023-09-26

我有一组这样的列表元素

<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类，所以我需要有一个平滑的过渡。

任何帮助，不胜感激。

首先，您的选择器$('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

更新以使其还包括最后一个和第一个 li

这是另一种方式。您只需检查下一个或上一个元素是否具有第一个或最后一个类，如果有，则不要更改类。

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>

对您的问题和我的解决方案进行了小提琴:)

新增以下内容：

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

试试这个：

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

演示

另一种方式

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/

相关文章：