Question

我有一个带按钮的页面，当按下按钮时，一组表单元素被添加到页面中。最终会有5-10个这样的按钮，所以我认为最好通过数组或类似的方式以编程方式添加它们。

有一个对象，包含元素和对象的对象。其属性，例如类型/名称/类等。但我只是决定用各种If元素添加什么，我觉得它根本没有效率 - 我希望这不是一个主观的问题。是否有类似开关的东西可以让它变得更好？

for(var input in addUserElements) {
    var obj = addUserElements[input];
    for(var property in obj) {
        if(obj[property] == 'text' && property == 'type' || obj[property] == 'email' && property == 'type' || obj[property] == 'number' && property == 'type' || obj[property] == 'password' && property == 'type') {
            $('.working-area').append('<input type="' + obj["type"] + '" name="' + obj["name"] + '" class="' + obj["class"] + '" placeholder="' + obj["placeholder"] + '" />');
        }
        if(obj[property] == 'textarea') {
            $('.working-area').append('<textarea name="' + obj["name"] + '" class="' + obj["class"] + '" placeholder="' + obj["placeholder"] + '"></textarea>');
        }
        if(obj[property] == 'button') {
            $('.working-area').append('<button name="' + obj["name"] + '" class="' + obj["class"] + '">' + obj["text"] + '</button>');
        }
    }
}

http://jsfiddle.net/q962T/

Answer 1

jQuery允许您通过传递这样的对象来创建元素：

$('body').html($('<div />', {class: 'spinner'}));

所以你可以这样做：

if(obj[property] == 'text' && property == 'type' || obj[property] == 'email' && property == 'type' || obj[property] == 'number' && property == 'type' || obj[property] == 'password' && property == 'type') {
    $("<input />", obj).appendTo('.working-area');
}
if(obj[property] == 'textarea') {
    $("<textarea />", obj).appendTo('.working-area');
}
if(obj[property] == 'button') {
    $("<button />", obj).appendTo('.working-area');
}

Answer 2

试试这个：

if(obj[property] == 'text' && property == 'type' || obj[property] == 'email' && property == 'type' || obj[property] == 'number' && property == 'type' || obj[property] == 'password' && property == 'type') {
    $("<input />", obj).appendTo('.working-area');
}
if(obj[property] == 'textarea') {
    $("<textarea />", obj).appendTo('.working-area');
}
if(obj[property] == 'button') {
    $("<button />", obj).appendTo('.working-area');
}

循环遍历一个对象以向DOM添加元素

2 个答案: