javascript - 在调用基于元素的插件时使用 $(this)

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。