eq(）后面跟attr(）时的怪异行为

Weird Behavior when eq() is followed by attr()

本文关键字：attr eq      更新时间：2023-09-26

我在试验jQuery，试图创建一个按钮，逐个淡出所有目标div，然后再次淡入。。我知道我可以使用.ech（）和循环来完成同样的事情，但正如我提到的，我正在努力理解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');

如果它是活动的，脚本只针对偶数/2次div。我知道我可以用.addClass代替，我试过了，效果不错。但我只是想了解到底发生了什么我错过了什么？

html、css和js文件可以在这里找到http://jsfiddle.net/33bjnjza/1/

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

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

相关文章：