javascript - for 循环迭代 array[i] 仅迭代到最后一个索引？

Question

我正在使用一个光滑的轮播，我希望非事件幻灯片的不透明度为0.4....所以我创建了一个变量数组(变量引用幻灯片的类)和一个for循环来迭代通过单击 X 类时的 .click() jQuery 函数的变量，在所有其他类上通过 .css 不透明度 0.4。单击时，只有一个类(另一张幻灯片图像)会褪色，因此我循环遍历数组和 console.logged 数组 [i] 和数组。令我惊讶的是，当 console.logging array[i] 时，它记录了带有类和内联样式更改的 html。当我控制台记录数组时，它记录了 [div.test__image.explosiveness] (数组中的最后一个索引)。我的循环出了什么问题/如何针对 css 更改定位所有索引？ 我使用 PUG 来处理 HTML 和 JS/jQuery。 提前感谢您的帮助和建议!

.carousel
.carousel__slide
    .test
        .test__image.explosiveness
        p Explosiveness
.carousel__slide
    .test
        .test__image.agility
        p Agility
.carousel__slide
    .test
        .test__image.flexibility
        p Flexibility
.carousel__slide
    .test
        .test__image.balance
        p Balance
.carousel__slide
    .test
        .test__image.footwork
        p Footwork
.carousel__slide
    .test
        .test__image
        p Explosiveness

// carousel fades
var agility = document.getElementsByClassName('agility'),
    explosiveness = document.getElementsByClassName('explosiveness'),
    flexibility = document.getElementsByClassName('flexibility'),
    balance = document.getElementsByClassName('balance'),
    footwork = document.getElementsByClassName('footwork');

var nonFootwork = (agility, balance, flexibility, explosiveness);

$('.footwork').click(function(){
    var len = nonFootwork.length;
    for(var i = 0; i < len; i++){
        $(nonFootwork[i]).css('opacity', '.4');
        console.log(nonFootwork[i]);
        console.log(nonFootwork);
        $('.footwork').css('opacity', '1');
    }
});

Answer 1

您应该使用方括号而不是括号来声明数组:

var nonFootwork = [agility, balance, flexibility, explosiveness];