Question

我试着寻找答案，但我不确定如何在没有先解释的情况下说出来。无论如何，这是我如何调用我的插件的一个例子：

$('body').myPlugin({container: 'exampleA', amount:4});

问题是，“身体”似乎没用，我可以在那里放置任何元素并且工作正常。我宁愿它说像....

$('.exampleA').myPlugin({amount:4});

...然后告诉插件使用exampleA作为容器。我认为这确实是可能的吗？我如何修改我的插件来实现这一目标？

以下是我的插件示例：

(function($){
 $.fn.extend({
     myPlugin: function(options) {
        var defaults = {
            container : 'list_container',
            amount : 2
        }
        var options =  $.extend(defaults, options);
        return this.each(function() {
            var o = options;
            //Start
            $('.'+o.container+' ul').each(function(){
               //DO STUFF HERE....
            });
            //End
        });
    }
});
})(jQuery);

如果需要，我可以发布实际的代码/插件，我只是觉得如果我发布一个简单的例子可能更容易解释我想要做的事情。

Answer 1

(function($){
 $.fn.extend({
 myPlugin: function(options) {
    var defaults = {
        container : 'list_container',
        amount : 2
    }
    var options =  $.extend(defaults, options);
    return this.each(function() {
        var o = options;
        //Start
        $(this).children('ul').each(function(){
           //DO STUFF HERE....
        });
        //End
    });
}
});
})(jQuery);

Answer 2

插件中的

this是jQuery选择。如果在此集合上使用find，则应将其范围限定为所选元素内的容器。

$.fn.extend({
    myPlugin: function(options) {
        var defaults = {
            container : 'list_container',
            amount : 2
        }
        var options =  $.extend(defaults, options);
        this.find('.' + options.container + ' ul').each(function(){
           //DO STUFF HERE....
        });
    });
}

Answer 3

$.fn.myPlugin = function (options) {
    var defaults = {
        amount: 2
    }
    var options = $.extend(defaults, options);
    return this.each(function () {
        $('ul', this).each(function () {
            //DO STUFF
        });
    });
}

FIDDLE

制作了一个jquery插件，它可以工作，但我还有一件我无法弄清楚的事情

3 个答案: