for循環遍歷數組[i]只迭代到最後一個索引？

Question

我正在使用光滑的旋轉木馬，我希望非活動幻燈片在不透明度.4 ....所以我創建了一個變量數組（變量引用了幻燈片的類）和一個for循環遍歷一個.click（）jQuery函數在X類的點擊變量，.css不透明度.4在其他所有變量上。在點擊只有一個類（另一個幻燈片圖像）會褪色，所以我通過數組和控制檯。阻止陣列[我]和數組。令我驚訝的是，當console.logging數組[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];