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

Question

我想我正在与一个错误作斗争。我在 jquery 中构建了一个小型旋转木马。更多的是一些盒子相互堆叠，当我的用户单击下一个和上一个箭头时，它们的 z-index (jquery.css) 会发生变化。到目前为止一切顺利，轮播与 owl-轮播相连，但它是独立的。每个盒子都有一个 class，我将其存储在一个数组中，然后用 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，所以当你将 -1 添加到数组时按下上一个箭头，然后你尝试滚动到下一张幻灯片里面添加 +1对于 i 出于某种原因，如果您控制台记录 (i) 的值，结果将为 5，然后它将继续增长。有什么办法可以防止这种行为吗？

Answer 1

您试图在修改 i 之前和之后修改 DOM，这导致了很多错误，具体取决于用户在单击下一个或上一个时在序列中的确切位置.还有一个地方，您无意中对轮播的长度进行了硬编码，如果它与 DOM 不匹配，则会导致其他问题。当 "next" 按钮循环到开头时故意设置 -1 假定用户将再次单击 "next"；如果用户没有完全按照您的计划行事，那也会中断。

我在这里简化了所有内容：先弄清楚 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，因此您可以看到它在做什么，但其他方面是一样的。）

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

Bug in jQuery array (i), when adding a +1 to a negative value

arrays

jquery

loops

init

variable-length-array