javascript - 如何更新 JS 对象以使用 JS 对表单数据进行更改?
问题描述
我有一个 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 || '');
}
});
});
解决方案
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>
推荐阅读
- python - 是否可以访问先前训练的 tensorflow 模型?
- python - python可以规范化对象数组吗?
- python - 如何更新子图?
- c# - 获取放置在图像中的组件的新位置
- flutter - 在 Flutter 的 Textfield 中单击电话后退按钮后,如何在 Flutter 上隐藏输入键盘?
- ios - 禁用屏幕轨道的自动 Firebase 分析
- java - 在 saucelabs 云设备中运行 appium 更改公共 IP 以进行特定国家/地区的应用程序测试
- python - Python:如果光标处于非活动状态五分钟,如何控制光标并在用户触摸鼠标时暂停程序(我的 python 程序)?
- java - 为什么我创建的菜单不适用于新的 Intent
- react-native - Expo App crashes/shuts down when remote js debug is activated on SDK 39 for Android