Javascript 如何从UI创建所需数据

我有一个UI，其中有一些复选框，我正试图将其转换为一个对象数组。对象有3个键

计数器

，

名称

和

IsActive

所有这些都是对象，将位于数组中

当复选框处于启用状态时，

isActive

应该是Y，我在这里根据我已经完成的任务获得一些好的方法

我所做的

var数据={
“计数器A”：[“CounterA1.jpg”、“CounterA2.jpg”]，
“计数器B”：[“CounterB1.jpg”]，
“计数器C”：[“CounterC1.jpg”]
}
var计数器={}；
var name={}；
var标志={}；
for（var输入数据）{
var新卡=$(`


`);
var ul_innerhtml=“”；
$（“.card header”，newCard）.text（键）；
数据[key].forEach（d=>{
ul_innerhtml+='
'+d+'
'
计数器={
“计数器”：键
}//正在获取名称，但仅给出最后一个计数器，即C
姓名={
“姓名”：d
}//还是这个
});
$（“.list group”，newCard）.append（ul_innerhtml）；
$（“.card”）.append（newCard.html（））；
}
$（“#btn”）。单击（函数（）{
console.log（counter）//仅打印计数器C
})

开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
浮动：对；
}
/*隐藏默认HTML复选框*/
.开关输入{
显示：无；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入.成功：选中+.滑块{
背景色：#8bc34a；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

去

检查下面我对您的代码所做的编辑。希望你能理解。你总是写得太多了。这样就不会发生

var数据={
“计数器A”：[“CounterA1.jpg”、“CounterA2.jpg”]，
“计数器B”：[“CounterB1.jpg”]，
“计数器C”：[“CounterC1.jpg”]
}
var计数器={}；
var name={}；
var标志={}；
var对象={}；
for（var输入数据）{
var数=[]；
var新卡=$(`


`);
var ul_innerhtml=“”；
$（“.card header”，newCard）.text（键）；
数据[key].forEach（d=>{
ul_innerhtml+='
'+d+'
'
数字推送（d）；
对象[键]=数字；
});
$（“.list group”，newCard）.append（ul_innerhtml）；
$（“.card”）.append（newCard.html（））；
}
$（“#btn”）。单击（函数（）{
console.log（object）//仅打印计数器C
})

开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
浮动：对；
}
/*隐藏默认HTML复选框*/
.开关输入{
显示：无；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入.成功：选中+.滑块{
背景色：#8bc34a；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

去

因为您可以在渲染后动态设置复选框的值。 更好的方法是迭代生成的DOM以获得实时值。 希望这有帮助

var数据={
“计数器A”：[“CounterA1.jpg”、“CounterA2.jpg”]，
“计数器B”：[“CounterB1.jpg”]，
“计数器C”：[“CounterC1.jpg”]
}
var计数器=[]；
var name={}；
var标志={}；
for（var输入数据）{
var新卡=$(`


`);
var ul_innerhtml=“”；
$（“.card header”，newCard）.text（键）；
数据[key].forEach（d=>{
ul_innerhtml+='
'+d+'
'
});
$（“.list group”，newCard）.append（ul_innerhtml）；
$（“.card”）.append（newCard.html（））；
}
$（“#btn”）。单击（函数（）{
$（'.card.list group'）。每个（（i，list group）=>{
$listGroup=$（listGroup）；
$listGroup.find（'li'）。每个（（j，list）=>{
让计数器={
“计数器”：$listGroup.prev（）.text（）
}
$list=$（列表）；
counter.Name=$list.find（'span'）.text（）；
counter.IsActive=$list.find（'input'）。是否（“：checked”）？'Y'：'N'；
计数器。按下（计数器）
})
});
控制台日志（计数器）；
})

开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
浮动：对；
}
/*隐藏默认HTML复选框*/
.开关输入{
显示：无；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入.成功：选中+.滑块{
背景色：#8bc34a；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.滑倒