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的最后一个值。如何使{variable}变量保留.myClassName的每个元素的正确值，同时能够从op或log函数访问每个bind？

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

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

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的方式，可能还有其他选项。

jQuery插件返回this.each

1 个答案: