for 循环遍历数组 [i] 只迭代到最后一个索引？

Question

我正在使用一个光滑的轮播，我希望非活动幻灯片的不透明度为 0.4.... 所以我创建了一个变量数组（变量是引用幻灯片的类）和一个 for 循环来迭代通过点击 X 类的 .click() jQuery 函数的变量，所有其他的 .css 不透明度 .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];