Question

我尝试创建一个基于JSON创建一些按钮的脚本，然后使用我需要的属性传递给它，如下所示：

var opts = {};
opts.buttons = [{
    type: "button",
    klass: "btn-default",
    text: "No"
    }, {
    type: "button",
    klass: "btn-primary",
    text: "Yes"
}];

var arr = [];
var button = $("<button></button>");
_.each(opts.buttons, function (v, k) {
    button.prop("type", v.type)
        .prop("class", v.klass)
        .html(v.text);
    arr.push(button);
});

然后，将它们串起来，就像这样：

var str = arr.join('');
$('#someEl').html(str);

但这不符合我的想法。返回值为[object Object] [object Object]，而不是按钮标记。

我该怎么做？任何帮助都会非常好。

Answer 1

请改为尝试：

opts.buttons = [{
    type: "button",
    klass: "btn-default",
    text: "No"
    }, {
    type: "button",
    klass: "btn-primary",
    text: "Yes"
}];

var arr = [];
_.each(opts.buttons, function (v, k) {
    var button = $("<button></button>");
    button.prop("type", v.type)
        .prop("class", v.klass)
        .html(v.text);
    arr.push(button);
});

后来......

_.each(arr, function (b) {
    $('#someEl').append(b);
});

注1 ：opts.buttons 不是 JSON，它是对象文字。

注意2 ：$('#someEl').html设置HTML内容，即其参数应为字符串。您可以使用：

var arr = [];
_.each(opts.buttons, function (v, k) {
    var button = $("<button></button>");
    button.prop("type", v.type)
        .prop("class", v.klass)
        .html(v.text);
    arr.push(button[0].outerHTML);
});

var str = arr.join('');
$('#someEl').html(str);

如果你坚持使用它。

注3 ：得到[object Object]因为jQuery按钮元素被转换为字符串（因为调用了join函数），如果{{1}给定对象的方法未被覆盖，它使用默认的toString实现，它提供toString表示。

Answer 2

var buttonsCfg = [{
    type: "button",
    klass: "btn-default",
    text: "No"
    }, {
    type: "button",
    klass: "btn-primary",
    text: "Yes"
}];

//you can use map to efficiently create an array from another
var buttons = buttonsCfg.map(function (cfg) {
    return $('<button>')
        .addClass(cfg.klass)
        .text(cfg.text)
        .prop('type', cfg.type);
});

//you shouldn't work with HTML strings when you already have constructed DOM elements
$('#someEl').append(buttons);

将jQuery对象存储到Array中以供以后使用

2 个答案: