jQuery 插件返回 this.each

Question

我正在构建一个插件，我们称之为ptest，我希望能够使用以下方式调用它：

$(".myClassName").ptest();

由于我使用的是调用插件的元素中的属性，假设data-attribute 我现在知道返回this.each(...); 是必须。
这是我的代码：

(function($){
    var op;
    $.fn.ptest = function(options) {
        op = $.extend({
            target: null,
            attribute: null
        }, options);

        return this.each(function(){
            op.target = $(this);
            op.attribute = op.target.attr("data-attribute");
            bind();
        });
    };
    function bind(){
        op.target.find('.clickable').bind('click',log);
    }
    function log(){
        console.log(op.attribute);
    }
}(jQuery));

我知道通过将op 作为全局变量，它将始终保留attribute 和target 的最后一个值。如何使 op 变量为 .myClassName 的每个元素保留正确的值，同时能够从 log 或 bind 函数访问每个 op？

我觉得我需要以不同的方式声明函数和变量，但是如何？

---

我看过很多不同的问题和教程，这里有一些：

• http://devheart.org/articles/tutorial-creating-a-jquery-plugin/
• jQuery plugin development - return this.each issue
• jQuery Plugin Return this.each and add function property to each object?
• https://learn.jquery.com/plugins/（当然）

Answer 1

如果bind 和log 确实需要访问循环中的特定元素，那么您需要在each 回调中定义它们，并将op 设为该回调的本地：

(function($){
    $.fn.ptest = function(options) {

        return this.each(function(){
            var op = $.extend({
                target: $(this)
            }, options);
            op.attribute = op.target.attr("data-attribute");
            bind();

            function bind(){
                op.target.find('.clickable').bind('click',log);
            }
            function log(){
                console.log(op.attribute);
            }
        });
    };
}(jQuery));

但根据您使用bind 和log 的方式，可能还有其他可用选项。