使用嵌套设置/选项创建jQuery插件

时间:2014-07-22 20:28:32

标签: jquery plugins

我想创建一个jQuery插件,它将具有嵌套设置/选项。

(function ($) {
    $.fn.generateText = function (options) {
        // Establish our default settings
        var settings = $.extend ({
            json: [{
                "id": "1",
                "name": "Name",
            }, {
                "id": "2",
                "name": "Name2",
            }]
        },
        options);
        $(settings.json).each(function () {
            $(this).append('<div class="text" data-text-id="' + settings.json.id + '" data-text-name="' + value.name + '" ></div>');
        });
    }
}
(jQuery));

并且在索引i中声明了

$(document).ready(function() {
    $('div').generateText();
});

但它不起作用。我不知道该怎么办才能让它发挥作用。 任何人都可以帮助我

我已按照您的建议更改了每个功能,但仍然无效(它没有显示<div class="text"> data-text-iddata-text-name

1 个答案:

答案 0 :(得分:0)

这是适当的插件。你需要认识到这里有嵌套循环,你需要阅读所有的评论。我还提供了 jsfiddle demo

另外,另外,您应该知道这根本不使用JSON。 JSON是一串序列化数据。您正在使用包含两个JS对象文字的JS数组文字,每个文字都有两个属性。 JSON看起来很相似,因为它借用了语法...但JSON是一个STRING。如果您没有字符串,则在当前上下文中不会有JSON。如果你不必解析它 - 它不是JSON。

(function ($) {
    $.fn.generateText = function (options) {
        // `generateText` is a function, which is its own scope and context for `this`

        // Your settings (which do not actually contain JSON, by the way...)
        var settings = $.extend (
            {
                json: [
                    {
                        id: 1,
                        name: 'Name',
                    },
                    {
                        id: 2,
                        name: 'Name2',
                    }
                ]
            },
            options
        );

        // In the function, `generateText`, `this` refers to the instance of jQuery which gets created when the plugin runs.
        // It contains the collection of elements which matched the DOM query when you ran it. Plugins should operate on all
        // DOM elements in the container, and return the entire collection for chaining. Since `$.fn.each` will iterate and returns
        // the collection, we can use it and return its own return to accomplish both purposes

        return this.each(function () {
            // Now we're in a new function--one which is being run for every element which was in the collection. Inside of a function
            // which is passed to `$.fn.each`, `this` refers to the raw DOM element being acted on for that iteration. We'll need to use
            // it in another scope a little lower, so we need to alias it:
            var ele = this;

            // `$.each` is a little different than `$.fn.each`. We pass it two args--the thing to iterate (the array from your so-called
            //  JSON in this case), and a function to run on each of the items as we iterate.
            $.each(settings.json, function () {
                // Ok, in a new function, so a new scope for `this` (...good thing we aliased the above `this` as `ele` since we need to use it.)
                // In this function `this` is the item from `settings.json` on the current iteration. You want things from it, and you want to
                // append to the element form above. Remember, `ele` was the raw DOM element for that iteration. Now we pass it to jQuery to
                // become a new collection which we can act on by appending a new div with some data attrs which come from the current item
                $(ele).append(
                    $('<div />')
                        .addClass('text')
                        .data('text-id', this.id)
                        .data('text-name', this.name)
                );
            });
        });
    }
}(jQuery));