Question

我挣扎着终于让[this]工作了。现在，我想把它分解如下所示，但它不起作用......这里有一些伏都教我不明白吗？

<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="http://goo.gl/XQPhA"></script>
<script type="text/javascript">
(function($) {
    $.test = function(options) {
        options = $.extend({}, $.test.settings, options);

        this.whiten = function() {
            $(this).css('background-color', options.bg);
        };
    };
    $.test.settings = { bg: 'white' };

    $.fn.test = function(options) {
        return this.each(function(index, el) {
            $.test(options);
        });
    };
})(jQuery);

$(document).ready(function() {
    $('ul').test().css('background-color', 'wheat');
    $('#go').click(function() {
        $('ul').whiten();
    });
});
</script>
</head>

<body>
<button id="go">whiten</button>
<ul id="list1">
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
</ul>
<ul id="list2">
<li>Ginger</li>
<li>Hops</li>
<li>Iris</li>
<li>Juniper</li>
<li>Kavakava</li>
<li>Lavender</li>
<li>Marjoram</li>
<li>Nutmeg</li>
<li>Oregano</li>
<li>Pennroyal</li>
</ul>
</body>
</html>

与之前的代码相比，在each()循环内部，我现在调用$.test(options)而不是$.fn.test(options) - 所以为什么一个工作而不是另一个（实际上，为什么/如何第一个工作开始吗？）

Answer 1

我会重新构建您的插件，以遵循plugin authoring guide中列出的准则，最明显的是使用.data()存储小部件设置的数据，并使用{{1}对您的插件进行方法调用}：

.test("method")

用法：(function($) { /* Default plugin settings: */ var settings = { bg: 'white' }; /* Method definitions: */ var methods = { init: function(options) { options = $.extend({}, options, settings); return this.each(function () { $(this).data("test", options); }); }, whiten: function() { var options = this.data("test"); this.css('background-color', options.bg); } }; /* Plugin definition and method calling logic: */ $.fn.test = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist'); } } })(jQuery);，$("elem").test()

以下是一个有效的例子：http://jsfiddle.net/z4R3X/

插件创作指南的另一个资源是jQueryUI源代码（例如，以autocomplete widget为例）。这些小部件是如何创建可重用，可读的jQuery插件的很好的例子。

插件方法 - 这里的魔力是什么？

1 个答案: