我有一个JS对象，如下所示。每当表单元素发生任何更改时，我都想更新它。但由于名称大括号“my_object[default][1][quick][position]”没有转换为数组，所以所有输入名称都作为字符串附加。
我有大约100个元素，包括输入、选择、单选、复选框等。我正在寻找一种动态的方法，无论何时更新任何元素，都可以更新对象。
HTML表单元素
<div class="col-12">
<label class="card">
<input name="my_object[default][1][quick][position]" class="checkable" value="text-left" type="radio" checked>
<span class="my-details">
Left
</span>
</label>
</div>
要更新的JS对象
<script>
var my_object ={
"default": {
"1": {
"data_src": "print1.jpg",
"quick": {
"a": "12",
"b": "22",
"position": "right"
},
"2": {
"data_src": "print2.jpg",
"quick": {
"a": "10",
"b": "20",
"position": "center"
}
}
}
};
</script>
我所尝试的
$("#submit_btn").click(function (e) {
e.preventDefault();
var formData = $("#myform").serializeArray();
$.each(formData, function () {
if (my_object[this.name]) {
if (!my_object[this.name].push) {
my_object[this.name] = [my_object[this.name]];
}
my_object[this.name].push(this.value || '');
}
});
});
null
var my_object ={
"default": {
"1": {
"data_src": "print1.jpg",
"quick": {
"a": "12",
"b": "22",
"position": "right"
},
},
"2": {
"data_src": "print2.jpg",
"quick": {
"a": "10",
"b": "20",
"position": "center"
}
}
}
};
function updateMe(ths){
eval($(ths).attr("data-jsonprop")+ "='" + $(ths).attr("value")+"'");
console.log(my_object);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<label class="card">
<input name="radio1" data-jsonprop='my_object["default"]["1"]["quick"]["position"]' class="checkable" value="text-left" type="radio" onchange="updateMe(this)">
<span class="my-details">
Left
</span>
</label>
<label class="card">
<input name="radio1" data-jsonprop='my_object["default"]["1"]["quick"]["position"]' class="checkable" value="text-right" type="radio" onchange="updateMe(this)">
<span class="my-details">
Right
</span>
</label>
</div>