Question

我正在尝试使用jQuery尝试创建一个按钮，逐个淡出所有目标div，然后再将它们淡出..我知道我可以使用.each（）和循环来完成同样的事情，但正如我所提到的我试图理解jQuery的这一部分。

这是代码

var divCount = $('.box').length;
var counter = 0;
$('.button').click(function() {
    var divAttr = $('.box').eq(counter).attr('class');
    if ( divAttr !== 'hidden' && counter >= 0 && counter <= divCount){
        $('.box').eq(counter).attr('class','hidden');
        $('.box').eq(counter).css('background', 'gray');
        $('.box').eq(counter).css('border', '1px solid black');
        counter++;
    }

这是我的问题，这就是这行代码：

$('.box').eq(counter).attr('class','hidden');

如果它处于活动状态，则脚本仅针对偶数/第二个div。我知道我可以使用.addClass代替，我试过它并且工作正常。但我只是想了解我错过的是什么？

html，css和js文件可以在http://jsfiddle.net/33bjnjza/1/

找到

Answer 1

执行$('.box').eq(counter).attr('class','hidden');时，您正在修改元素。您正在删除上的class属性（以及其所有类），并将其替换为一个类'hidden'。

因此，当您在下一行执行$('.box').eq(counter)时，它将返回不同的元素，因为$('.box')现在只包含一个元素。

当eq（）跟随attr（）时的奇怪行为

1 个答案: