Question

希望标题说明了我要做什么，但是代码可能会更好地说明它。我正在创建一个幻灯片显示/幻灯片，它通过添加loaded类来设置下一个div，并将上一个div标记为last-active。然后将电流标记为active。

我有以下代码可以工作到一定程度，并且效率可能很低，但是我想要的是循环遍历。因此，一旦active到达div编号4，并且用户单击按钮div编号1就会变成active，div编号4就会变成last-active，而div 2就会变成loaded。 >

就我目前的知识而言，我已经碰壁了，所以在这一点上的投入将不胜感激。

$(document).ready(function() {

  $(".slide:first").addClass('active');
  $(".slide:first").next().addClass('loaded');
  
  $("button.change").click(function() {
    
    $('div.slide.active').removeClass('active').next().addClass('active');
    $('div.slide.active').removeClass('loaded');
    $('div.slide.active').prev().addClass('last-active');
    $('div.slide.active').next().addClass('loaded');
    $('div.slide.last-active').prev().removeClass('last-active');
        
  })
});

* {
  box-sizing: border-box;
}

.slide {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: #ddd;
}


.active {
  background: red;
}

.last-active {
  border: 10px solid black;
}

.loaded {
  border: 10px solid green;
}

.new {
  color: green;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-wrapper">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <div class="slide">Slide 4</div>
  
</div>
<button class="change">Change</button>

Answer 1

我将重构您的代码以检索所有相关元素，例如：

var $active = $('.slide.active');
var $next = $('.slide').eq(($active.index() + 1) % $('.slide').length);
var $afterNext = $('.slide').eq(($active.index() + 2) % $('.slide').length);

这结合使用.eq()和.index()和一个模，以检索当前活动的元素以及后面两个元素的索引。

然后，您只需要将所需的CSS类添加到每个类中。这也使您的代码在此过程中非常容易阅读（至少是个人观点）。

演示：

$(function () {
  $('.slide:first').addClass('active');
  $('.slide:eq(1)').addClass('loaded');

  $('button.change').on('click', function () {
    // Retrieve the currently active element, as well as next and next + 1 ones
    var $active = $('.slide.active');
    var $next = $('.slide').eq(($active.index() + 1) % $('.slide').length);
    var $afterNext = $('.slide').eq(($active.index() + 2) % $('.slide').length);

    // Remove all classes from slides
    $('.slide').removeClass('last-active active loaded');
    
    // Add the new classes
    $active.addClass('last-active');
    $next.addClass('active');
    $afterNext.addClass('loaded');
  })
});

* { box-sizing:border-box; }
.slide { width:100px; height:100px; display:inline-block; background:#ddd; }
.active { background:red; }
.last-active { border:10px solid black; }
.loaded { border:10px solid green; }
.new { color:green; background: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-wrapper">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <div class="slide">Slide 4</div>
</div>
<button class="change">Change</button>

（请注意，我在此过程中对代码的其余部分进行了一点调整。）

遍历div-将类添加到上一个和下一个div

1 个答案: