将 +1 添加到负值时，jQuery 数组 (i) 中的错误

Question

我想我正在与一个错误作斗争。我在 jquery 中构建了一个小旋转木马。更多的是一些相互堆叠的框，当我的用户单击下一个和上一个箭头时，它们会改变它们的 z-index (jquery.css)。到目前为止一切顺利，carousel 与 owl-carousel 相连，但它是独立的。每个盒子都有一个类，我存储在一个数组中，然后用 jquery 循环。问题如下：

jquery：

$(document).ready(function () {

    var carousel = $('.covercarousel');
    var carouselnum = carousel.length;
    var i = 0;

    $('.owl-next').click(function () {
        i++;

        $(carousel).css('zIndex', '0');
        $(carousel[i]).css('zIndex', '2');
        if (i == (carouselnum-1)) {
            $(carousel).css('zIndex', '2');
            i = -1;
        }
    });

    $('.owl-prev').click(function () {
        i--;
        $(carousel).css('zIndex', '0');
        $(carousel[i]).css('zIndex', '2');
        if (i < 0) {

            i = carouselnum-1;
            $(carousel[5]).css('z-index', '2');
            $(carousel).css('zIndex', '0');
        }
    });
});

HTML：

<div class="covercarouselbox">
    <div class="covercarousel">
        <div>
            a
        </div>
    </div>
    <div class="covercarousel">
        <div>
            b
        </div>
    </div>
    <div class="covercarousel">
        <div>
            c
        </div>
    </div>
    <div class="covercarousel">
        <div>
            d
        </div>
    </div>
    <div class="covercarousel">
        <div>
            e
        </div>
    </div>
    <div class="covercarousel">
        <div>
            f
        </div>
    </div>
</div>

当您滚动到下一个 div 时，轮播可以正常工作。如果您通过控制台记录 (i)，您会注意到计数从 0 到 4 工作正常（数组中有 6 个元素，我给第一个元素一个 z-index 2 和 css => covercarousel:nth-child (1) {z-index=2} )，因此当到达数组中的第五个元素时，分配给 i 的值为 -1，因此计数返回 0 (i++)。

但是当你做相反的事情时，它会刹车：第一个值是 0，所以当你按 prev 箭头将 -1 添加到数组时，然后你尝试滚动到下一张幻灯片，在里面添加一个 +1 i 出于某种原因，如果您在控制台记录 (i) 的值，结果将是 5，然后它会继续增长。有什么办法可以防止这种行为？

Answer 1

您尝试在修改 i 之前和之后修改 DOM，这会导致很多错误，具体取决于用户在单击下一个或上一个时在序列中的确切位置。还有一个地方是您无意中硬编码了轮播的长度，如果这与 DOM 不匹配会导致额外的问题。当“下一步”按钮循环到开头时故意设置 -1 假定用户将再次单击“下一步”；如果用户的行为不完全符合您的计划，这也会中断。

我在这里简化了所有内容：首先弄清楚i 应该是什么，然后根据它修改 DOM：

$(document).ready(function() {

  var carousel = $('.covercarousel');
  var carouselnum = carousel.length - 1;
  var i = 0;

  $('.owl-next').click(function() {
    i++;
    if (i>carouselnum) {i=0}
    // console.log(i);
    $(carousel).css('backgroundColor', '#FFF');
    $(carousel[i]).css('backgroundColor', '#FFC');
  });

  $('.owl-prev').click(function() {
    i--;
    if (i<0) {i = carouselnum}
    // console.log(i);
    $(carousel).css('backgroundColor', '#FFF');
    $(carousel[i]).css('backgroundColor', '#FFC');    
  });
});

.covercarousel {display:inline-block; padding: 0.5em}
.owl-next, .owl-prev {cursor: pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="covercarouselbox">
  <div class="covercarousel"><div>a</div></div>
  <div class="covercarousel"><div>b</div></div>
  <div class="covercarousel"><div>c</div></div>
  <div class="covercarousel"><div>d</div></div>
  <div class="covercarousel"><div>e</div></div>
  <div class="covercarousel"><div>f</div></div>
</div>
<div class="owl-next">Next</div>
<div class="owl-prev">Prev</div>

（这会设置 backgroundColor 而不是 zIndex，因此您可以看到它在做什么，但除此之外它是相同的想法。）