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

Question

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

像这样的东西

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

所以这里我试图将newFtn添加到具有类名".custom-div"的div元素中.

经过反复试验并检查萤火虫中的元素.我按照以下方式工作

$(".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).

您可以从官方教程开始学习更多关于jQuery插件开发的知识.

如果你真的想简单地为匹配集中的所有元素添加一个类,那么绝对不需要做任何这样的事情.只需调用addClassjQuery对象即可.它将应用于该对象中包含的所有元素.