Question

编辑2（使问题更容易理解）

我想要实现的效果如下：每当一个元素进入视口时，一个“可见的”是类被添加到它并且相同的＆＃39;是可见的＆＃39; class从前一个元素中删除。

现在我已设法使其正常运行，但我在运行for循环之前删除了所有is-visible类，然后将is-visible类添加到视口中的元素。

它有效，但就性能而言，我认为最好从element[i -1]中删除该类。这是我无法让它发挥作用。

如果我尝试使element[i-1]解决方案正常工作，那么这是一个简化的小提琴：https://jsfiddle.net/epigeyre/vm36fpuo/11/。

编辑1（回答一些问题）

我已经通过使用模数运算符（(i+len-1)%len）更正了@Catalin Iancu提出的问题（非常感谢您的宝贵帮助）。

原始问题（不太清楚）

我试图通过以下代码获取for循环中的前一个元素（以更改其类）：

for (var i = 0; i < array.length; i++) {
    if(array[i-1] && my other conditions) {
        array[i-1].classList.remove('is-visible');
        array[i].classList.add('is-visible');
    }
}

但它没有删除[i-1]元素的类。

以下是我的模块的更完整代码（这是在scroll eventlistener中运行的）：

var services = document.getElementsByClassName('services'),
    contRect = servicesContainer.getBoundingClientRect();

for (var i = 0; i < services.length; i++) {
    var serviceRect = services[i].getBoundingClientRect();

    if ( !services[i].classList.contains('active') && Math.round(serviceRect.left) < contRect.right && services[i-1]) {
        services[i-1].classList.remove('is-visible');
        services[i].classList.add('is-visible');
    }
}

感谢您的帮助！

Answer 1

除if(array[i-1] && my other conditions)不存在的第一种情况外，您的array[-1]始终为真。因此，它将删除然后为每个元素添加active类，这将使它看起来只有第一个元素的类被删除。

当您不再需要循环时，您需要的是更好的if条件或break语句

for (var i = 0; i < array.length; i++) {
    if(array[i] && i != array.length - 1) {
        array[i].classList.remove('active');
    }
}
array[array.length - 1].classList.add('active');

Answer 2

问题可能是基于您的代码：services[i-1].classList.remove('active');和services[i].classList.add('active');您在当前迭代中添加的'active'类将在下一次迭代中删除！

所以你的代码有逻辑错误，数组索引不会返回所有上一项！

Answer 3

如果创建包含前一个元素的变量怎么办？

var previous = array[0];
for (var i = 0; i < array.length; i++) {
    if(previous && my other conditions) {
        previous.classList.remove('active');
        array[i].classList.add('active');
    break;
    }
    previous = array[i];
}

在for循环中获取前一个元素

3 个答案: