Question

我想创建一个旋转木马，为此我想将prev和next class添加到当前的li。

我的活跃课程在我的名单中工作正常，但我

<div id="carrousel">
  <ul>
    <li></li>
    <li></li>
    <li class="prev_slide"></li>
    <li class="active"></li>
    <li class="next_slide"></li>
    <li></li>
    <li></li>
  </ul>
</div>

我的问题是，每次li.active更改时，我都不知道如何删除prev_slide和next_slide。每次删除活动类的prev和next class。在我的列表的末尾，将next_slide添加到第一个元素等...

jQuery('#carrousel ul').find('li.active').prev().addClass('prev_slide');
jQuery('#carrousel ul').find('li.active').next().addClass('next_slide');

提前感谢您的帮助

Answer 1

https://jsfiddle.net/yq62bc8f/

＆＃13;

var $slides = jQuery('#carrousel ul > li');
var $active = $slides.filter('.active');

var $prev = $active.prev();
if (!$prev.length) {
  $prev = $slides.last();
}

var $next = $active.next();
if (!$next.length) {
  $next = $slides.first();
}

$slides.removeClass('prev_slide').removeClass('next_slide');
$prev.addClass('prev_slide');
$next.addClass('next_slide');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

您可以在幻灯片中找到当前有效的filter()，然后找到prev和next（就像您已经做过的那样）。在边缘，你可以检查你是否有一个元素，然后只使用第一个/最后一个。

Answer 2

试试这段代码

$('ul li').click(function() {
  $('li').removeClass('active');
  $('li').removeClass('prev_slide');
  $('li').removeClass('next_slide');
  $(this).addClass('active');
  $('#carrousel ul').find('li.active').prev().addClass('prev_slide');
  $('#carrousel ul').find('li.active').next().addClass('next_slide');
});

.prev_slide,
.next_slide {
  background: blue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carrousel">
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

Answer 3

这正是您所需要的

＆＃13;

$( document ).ready(function() {
    $('#carrousel li').on('click',function(){
       $('#carrousel li').removeClass('prev_slide');
       $('#carrousel li').removeClass('next_slide');
       $('#carrousel li').removeClass('active');
       $(this).addClass('active');
       var previous = $('.active').prev();
        if(previous.length == 0){
             previous = $('#carrousel li').last();   
        }
        previous.addClass('prev_slide');

        var next = $('.active').next();
        if(next.length == 0){
           next = $('#carrousel li').first();
        }
         next.addClass('next_slide');
    });
});

＆＃13;

.prev_slide { color: red; }
.next_slide { color: green; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carrousel">
  <ul>
    <li>11111</li>
    <li>211111</li>
    <li class="prev_slide">311111</li>
    <li class="active">41111</li>
    <li class="next_slide">5111111</li>
    <li>6111111</li>
    <li>71111</li>
  </ul>
</div>

＆＃13;

您可以注意到我已经比较了前一个元素和下一个元素的长度，因此如果它们不存在则循环选择它。

将类添加到prev和当前元素的下一个元素

3 个答案: