jquery - 使用 jquery 将函数添加到 dom 元素

Question

我正在尝试向 dom 中共享相同类名的特定 div 元素添加自定义函数。

类似这样的

$(".custom-div").each(function(){
        $(this).newFtn = function() {
            $(this).addClass("makeover");
        }
});

因此，我尝试将 newFtn 添加到类名为“.custom-div”的 div 元素中。

经过反复试验并检查 firebug 中的元素。我让它按以下方式工作

$(".custom-div").each(function(){
        $(this).init.prototype.newFtn = function() {
            $(this).addClass("makeover");
        }
});

但是，我对此有几个问题；我不确定为什么这样做有效，以这种方式这样做有什么缺点吗？有人可以解释一下吗？抽象的解释应该没问题。

Answer 1

我认为你想做的是编写一个 jQuery 插件。基本思想是这样的:

(function($) {
    $.fn.newFtn = function() {
        this.each(function() {
            //Do stuff for each element in matched set
        });
    };
})(jQuery);

然后您可以将此方法应用于任何 jQuery 对象:

$(".custom-div").newFtn();

请注意，这是大多数内置 jQuery 方法的工作方式(它们本身迭代匹配的元素集，因此通常不需要使用 each)。

您可以从 official tutorial 开始了解有关 jQuery 插件开发的更多信息。 .

如果您确实想简单地向匹配集中的所有元素添加一个类，则绝对不需要执行任何操作。只需在 jQuery 对象上调用 addClass 即可。它将应用于该对象中包含的所有元素。