我想创建一个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-id
或data-text-name
答案 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));