如何在jQuery插件回調中使用'this'？

Question

目前我正在創建一個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插件，但我找不到任何關於回調的信息。

Answer 1

您需要為回調設置上下文。 你可以使用call ：

settings.callback.call(this);

Answer 2

將其調用為

settings.callback.call(this);

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

Answer 3

選項1：

通過this ，當你調用回callback()

(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");
    }
});

這是一個工作小提琴 。