Question

我正在使用光滑的旋转木马，我希望非活动幻灯片处于不透明状态.4 ....所以我创建了一个变量数组（变量引用幻灯片的类）和for循环迭代通过单击X类的.click（）jQuery函数的变量，所有其他的.css不透明度.4。在点击时，只有一个类（另一个幻灯片图像）会褪色，所以我循环遍历数组和console.log两个数组[i]和数组。令我惊讶的是，当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];

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

1 个答案: