从Javascript对象循环动态创建的表单。如何将数据保存回对象

我有下面的代码，它接受一个字符串，并将其修改为一个对象。然后，我创建一个项目列表，当用户单击其中一个列表项目时，它会创建一个表单，其中的值位于分配给该键的对象中

我遇到的问题是编辑表单数据并将其保存回对象，因为表单是动态创建的

演示：

代码（不要注意$（document.ready（）…这是字符串解析器上面的代码）：

var str='View\n{\n Name:View1；\n Image\n{\n BackgroundImage:Image.gif；\n位置：0,0；\n宽度：320；\n高度：480；\n}\n按钮\n{\n BackgroundImage:Button.gif；\n转换：View2；\n位置：49,80；\n宽度：216；\n高度：71；\n}\n\n按钮\n{\n背景图像：Button2.gif；\n位置：65217；\n宽度：188；\n高度：134；\n}\n标签\n{\n位置：106,91；\n宽度：96；\n高度：34；\n文本：“按钮”；\n字体大小：32；\n颜色：0.12549,0.298039,0.364706,1；\n}\n滚动\n{\n位置：106,91；\n宽度：96；\n高度：34；\n按钮{\n背景图像：Button2.gif；\n位置：65217；\n宽度：188；\n高度：134；\n}\n按钮{\n BackgroundImage:Button2.gif；\n位置：65217；\n宽度：188；\n\n高度：134；\n}\n\n}\n\n}'；
str=str.replace（/（\w+）\s*\{/g，“$1:{”）；//在每个命名对象后添加冒号
str=str.replace（//\}（\s*\w）/g，“}，$1”）；//在每个新命名对象之前添加逗号
str=str.replace（/；/g，“，”）；//用逗号替换分号
str=str.replace（/，（\s+\}）/g，“$1”）；//去掉尾随的逗号
str=str.replace（/（[\d\.]+（，[\d\.]+））/g，[$1]”；//创建数字数组
str=str.replace（/“/g，”）；//去掉所有双引号
str=str.replace（/：\s+（[^\[\d\{][^，]+）/g'，：“$1”）；//创建字符串
$（“#解析列表”）.html（str）；
var-objStr；
eval（“objStr={“+str+”}；”；
//结束解析字符串
$（文档）.ready（函数（）{
选择var；
//生成初始对象列表
var initObjectList=''；
$.each（objStr.View，function（k，v）{
initObjectList+=''+k+''；
});
initObjectList+=''；
$（'#main'）.append（initObjectList）
$（文档）。在（'单击'，'主分区'，函数（）上{
var指数=$（“#主要部门”）。指数（本）；
$（此）。单击（函数（）{
$（'#form div'）。删除（）；
代码片段=”；
x=$（'#主分区'）.toArray（）；
代码片段=（x[index].innerHTML）；
log（代码片段）；
var initObjectDetail=''；
$.each（objStr.View[codeSnippet]，function（k，v）{
initObjectDetail+=''+k+''+''；
控制台日志（v）；
});
initObjectList+=''；
$（'#form'）。追加（initObjectDetail）
});
});
});​

---

输入如何将其保存回对象将不胜感激

通过在形成列表的原始循环中指定单击处理程序，可以大大简化可单击对象列表的创建

表单生成和保存功能由于数据的特殊性而变得复杂，即

objStr.View

属性中的一个是字符串，而其他属性是对象。您将在下面看到，我们必须在两个地方分支以处理此差异

$(document).ready(function () {
    var $objectList = $('<div id="main" />').appendTo($('#main'));
    $.each(objStr.View, function(k, v) {
        $('<div/>').append(k).appendTo($objectList).on('click', function(){
            var $wrapper = $('#form .wrapper').empty();
            if(typeof v === 'string') {
                $('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
            }
            else {//object
                $('<h3 class="formHeading" />').append(k).appendTo($wrapper);
                $.each(v, function(key, val) {
                    $('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
                });
            }
            $("<button>Save</button>").appendTo($wrapper).on('click', function() {
                if(typeof v === 'string') {
                    v = $(this).closest(".wrapper").find("input").val();
                }
                else {//object
                    $(this).closest(".wrapper").find(".item").each(function(i, div) {
                        var $div = $(div),
                            key = $div.find(".key").text(),
                            val = $div.find("input").val();
                        v[key] = val;
                    });
                }
            });
        });
    });
});

$（文档）.ready（函数（）{
var$objectList=$（''）.appendTo（$（'#main'）；
$.each（objStr.View，function（k，v）{
$（“”）.append（k）.appendTo（$objectList）.on（'click'，function（））{
var$wrapper=$（'#form.wrapper'）.empty（）；
if（typeof v=='string'）{
$（''）.append（''+k+''）.appendTo（$wrapper）；
}
else{//object
$（''）.append（k）.appendTo（$wrapper）；
$。每个（v，功能（键，val）{
$（“”）.append（“”+key+“”+“”）.appendTo（$wrapper）；
});
}
$（“保存”）.appendTo（$wrapper）.on（'click'，function（）{
if（typeof v=='string'）{
v=$（this）.closest（.wrapper”）.find（“input”）.val（）；
}
else{//object
$（this）.closed（.wrapper”）.find（.item”）.each（函数（i，div）{
变量$div=$（div），
key=$div.find（“.key”）.text（），
val=$div.find（“输入”）.val（）；
v[key]=val；
});
}
});
});
});
});

您还将看到，此代码不需要在HTML中硬编码的“保存”按钮。每次填充表单时都会生成一个新的“保存”按钮。不必这样，但这是我采用的方法

---

我喜欢。那太好了。谢谢！

$(document).ready(function () {
    var $objectList = $('<div id="main" />').appendTo($('#main'));
    $.each(objStr.View, function(k, v) {
        $('<div/>').append(k).appendTo($objectList).on('click', function(){
            var $wrapper = $('#form .wrapper').empty();
            if(typeof v === 'string') {
                $('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
            }
            else {//object
                $('<h3 class="formHeading" />').append(k).appendTo($wrapper);
                $.each(v, function(key, val) {
                    $('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
                });
            }
            $("<button>Save</button>").appendTo($wrapper).on('click', function() {
                if(typeof v === 'string') {
                    v = $(this).closest(".wrapper").find("input").val();
                }
                else {//object
                    $(this).closest(".wrapper").find(".item").each(function(i, div) {
                        var $div = $(div),
                            key = $div.find(".key").text(),
                            val = $div.find("input").val();
                        v[key] = val;
                    });
                }
            });
        });
    });
});