Question

我正在为jQuery创建一个插件。我不会尝试在这里解释插件，所以为了简单起见，我点击我的插件会在您点击目标元素时打开警报。这是我的插件的简单版本。

(function($) {  

    // Options
    var defaults = {
        message:    'Default message'
    };

    var options = $.extend(defaults, options);

    $.fn.jAlert = function(options) {
        return this.each(function(){

            var $this = $(this);

            $this.click(function(){
                alert(options.message);
            });

        });
    };
})(jQuery);

我可以走得那么远。它很棒。但是，如果我这样调用我的插件：

$('h1.simon').plugin({ message: 'Hello ' + $(this).attr('class') });

消息返回'Hello undefined'，我更喜欢它是'Hello simon'（H1标签的类）。

我确信这是最简单的事情，但我甚至不确定我应该使用谷歌搜索找到解决方案。

非常感谢任何帮助！

干杯，
将

更新

玩了一下后，这似乎有用......我不明白为什么！我认为我还没有真正了解范围。我想我会去做一些阅读。

$('h1.simon').click(function(){
    $(this).jAlert({
        icon:   'Hello ' + $(this).attr('class')
    });
});

Answer 1

保存对元素的引用：

var $el = $('h1.simon');
$el.plugin({ message: 'Hello ' + $el.attr('class') });

否则this指的是没有课程的window。

Answer 2

如果您希望能够使用this以方便使用，则可以允许message接受返回您要显示的值的函数。

试一试： http://jsfiddle.net/9hyJc/

(function($) {  

    $.fn.jAlert = function(options) {

    // Options
    var defaults = {
        message:    'Default message'
    };

    var options = $.extend(defaults, options);

        return this.each(function(){

            var $this = $(this);

            $this.click(function(){
                if($.isFunction(options.message)) {
                       // If it is a function, call it, 
                       //    setting "this" to the current element
                    alert(options.message.call(this));
                } else {
                       // Otherwise, assume it is a string
                    alert(options.message);
                }
            });

        });
    };
})(jQuery);

$('h1.simon').jAlert({ message: function() { return 'Hello ' + $(this).attr('class'); } });

Answer 3

当你调用插件并传递选项时.. this引用window而不是你想象中的元素

在调用基于元素的插件时使用$（this）

3 个答案: