如何使用'这'在jQuery插件回调中

How to use 'this' in jQuery plugin callback?

本文关键字：插件 回调 jQuery 何使用      更新时间：2023-09-26

目前我正在创建一个jQuery插件。

我在使用回调时遇到了一个问题。

插件代码

$.fn.bondye = function (options) {
    var settings = $.extend({
        callback: function () {}
    }, options);
    return this.each(function () {
        $(this).addClass('test');
        settings.callback();
    });
};

我希望如何执行代码

$(".myDiv").bondye({
    callback: function () {
        $(this).removeClass("test");
    }
});

jsFiddle示例：http://jsfiddle.net/HEJtm/1/

但是我无法在回调中对div执行任何操作。

我曾经http://learn.jquery.com/plugins/advanced-plugin-concepts/学习开发jQuery插件，但我找不到任何关于回调的内容。

您需要为回调设置上下文。您可以使用call:

settings.callback.call(this);

将其作为调用

settings.callback.call(this);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

选项1:

调用callback():时将this传回

(function ($) {
    $.fn.bondye = function (options) {
        var settings = $.extend({
            callback: function () {}
        }, options);
        return this.each(function () {
            $(this).addClass('test');
            // Pass "this" back here:
            settings.callback(this);
        });
    };
})(jQuery);
$(".myDiv").bondye({
    callback: function (obj) {
        $(obj).removeClass("test");
    }
});

这是一把正在工作的小提琴。

选项2:（首选）

(function ($) {
    $.fn.bondye = function (options) {
        var settings = $.extend({
            callback: function () {}
        }, options);
        return this.each(function () {
            $(this).addClass('test');
            settings.callback.call(this);
            settings.callback();
        });
    };
})(jQuery);
$(".myDiv").bondye({
    callback: function () {
        $(this).removeClass("test");
    }
});

这是一把正在工作的小提琴。

相关文章：