jquery - 关于jQuery源代码(addClass)的问题

Question

你能解释一下 addClass 中“if ( jQuery.isFunction( value ))”中的以下逻辑吗？我不明白它的目的是什么。谢谢。

addClass: function( value ) {

        var classNames, i, l, elem,
            setClass, c, cl;

        if ( jQuery.isFunction( value ) ) {
            return this.each(function( j ) {
                jQuery( this ).addClass( value.call(this, j, this.className) );
            });
        }

        if ( value && typeof value === "string" ) {
            classNames = value.split( rspace );

            for ( i = 0, l = this.length; i < l; i++ ) {
                elem = this[ i ];

                if ( elem.nodeType === 1 ) {
                    if ( !elem.className && classNames.length === 1 ) {
                        elem.className = value;

                    } else {
                        setClass = " " + elem.className + " ";

                        for ( c = 0, cl = classNames.length; c < cl; c++ ) {
                            if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
                                setClass += classNames[ c ] + " ";
                            }
                        }
                        elem.className = jQuery.trim( setClass );
                    }
                }
            }
        }

        return this;
    },

Answer 1

看看 API page 。您将看到有一种调用 addClass 的方法，该方法将函数作为第一个参数传递。该函数接收元素并返回要添加的类名:

A function returning one or more space-separated class names to be added. Receives the index position of the element in the set and the old class value as arguments. Within the function, this refers to the current element in the set.

所以你可以这样做:

$('.someElements').addClass(function(i, currentClass) {
    return 'newClass' + i;
});

选定的第一个元素将添加类 newClass0，第二个 newClass1 等。

<小时/>

使用您发布的代码:

if (jQuery.isFunction(value)) {
    return this.each(function (j) {
        jQuery(this).addClass(value.call(this, j, this.className));
    });
}

这说:

1. 如果第一个参数是函数
2. 循环遍历所有选定的元素
3. 对于每个元素，使用元素作为上下文(this 值)、循环中的位置作为第一个参数以及 className 属性来调用函数作为第二个参数)。
4. 然后使用步骤 #3 的结果调用 addClass 方法。