Question

我有这个插件问题很长时间但是无法正确使用。

这是测试page。当您点击页面按钮时，它会提醒page 两次，但会在第二时提醒photo时间。

这样做是因为我将该插件重新用于另一个名为“photo”的按钮。我认为第二个按钮会覆盖第一个按钮，我不太明白为什么会这样做。

$(document).ready(function(){

    $('.get-page').get_overlay({
        targetObject:         '.page'
    });

    $('.get-photo').get_overlay({
        targetObject:         '.photo'
    });

});

那么这意味着这个插件根本无法重用，那么首先有一个插件有什么意义呢？

知道我在这个插件中做错了吗？我该如何解决？

(function($){

    $.fn.get_overlay = function(options) {

             var defaults = {
                targetObject:            ''
            }

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

            var $cm = this.click(function() {

                alert(o.targetObject);

                $.fn.get_overlay.centralise();

                return false;



            });

            if(!$.fn.get_overlay.centralise) $.fn.get_overlay.centralise = {};

            $.fn.get_overlay.centralise = function() {

                alert(o.targetObject);

            }

    }      
})(jQuery);

Answer 1

@lauthiamkok ，我认为您需要修改jquery docs中的插件创作指南。在你的插件中执行$.fn.get_overlay.centralise可能不是一个好主意。如果您想要从公共范围访问centralise()，您应该将其作为一种方法。然后，正如创作指南所建议的那样，建议返回jquery对象以允许链接插件。
查看http://jsfiddle.net/elclanrs/FrMSY/1/

上的工作示例

$.fn.get_overlay = function(options) {

    var o = $.extend({
        targetObject: ''
    }, options);
    var $this = this;

    $this.centralise = function() {
        alert(o.targetObject);
    };

    return this.each(function() {
        $(this).click(function() {
            alert(o.targetObject);
            $this.centralise();
            return false;
        });
    });

};

Answer 2

不使用本地变量存储targetObject，而是使用.data来存储它。

如何使jquery插件可重用？

2 个答案: