Question

我正在研究JQuery插件，并在中间堆叠。应该这么简单，但我无法找到解决方案;

这就是我所拥有的：

    (function ($, undefined) {
    $.fn.myplug = function (options) {
       return this.append($("<p/>").text(option.text + " initiated"));
    }

    $.fn.myplug.ext = function () {
       //here I want read options from myplug (after running myplug first)
       //and this.attr("id") which should give me #mydiv (how do i accomplish this)
       return this.append("---" + option.text + "after initiation")
    }

    }(jQuery));


    $(document).ready(function () {
    var args={text:"myvar"};

    $("#mydiv").myplug(args);
    $("#mydiv").myplug.ext();

    });

HTML：

 <div id="mydiv"></div>

实现这些目标的最佳做法是什么，我无法找到适当的名称来搜索它。感谢

修改

什么是jquery术语中的ext意味着，我把它命名为sub方法，这不是肯定的

Answer 1

您可以通过插件初始化函数中的.data将所需内容附加到元素中。后续的扩展调用可以读取该数据：

(function($) {


    $.fn.myplug = function (options) {
        var self = this;
        $(self).data('myplug', options);
        return {
            ext:function () {
               $(self).text(
                   $(self).data('myplug').title
               );
           }
        }
    }


})($);

$("#foo").myplug({title:'there'})
$("#foo").myplug().ext()

http://jsfiddle.net/B84E9/

扩展方法应该使用myplug()，而不仅仅是myplug才能支持正确的范围。通常的jQuery模式是将扩展名称作为第一个参数传递，如myplug('ext', ...)。

Answer 2

只有附加到$.fn对象的函数才能获得对所需this（元素）范围的正确引用。

根据您的使用情况，您实际上正在扩展之前定义的function ...

最佳做法是使用jQuery建议的插件开发指南

例如here你会找到一些关于它的信息

// Plugin definition.
$.fn.hilight = function( options ) {

    // Iterate and reformat each matched element.
    return this.each(function() {

        var elem = $( this );

        // ...

        var markup = elem.html();

        // Call our format function.
        markup = $.fn.hilight.format( markup );

        elem.html( markup );

    });

};

// Define our format function.
$.fn.hilight.format = function( txt ) {
    return "<strong>" + txt + "</strong>";
};

如您所见，您当然可以在插件函数上定义一个函数，但是您需要将参数传递给它，无法访问元素的this范围。或者，如果您想要元素范围

，则可以使用call或apply

var $el = $(".element");
$el.hilight.format.call($el);

使用sub方法共享对象参数

2 个答案: