Javascript 从UI创建所需数据时面临问题

我有一个UI，其中有复选框，并使用CSS将它们作为开关，因此我必须从UI创建所需的数据格式，它是

数组中
对象的数据，我尝试过创建它，但没有想到循环对象

我所做的


var i=0；
函数updateObj（数据）{
//编写代码将标志从false更新为true；
}
风险值数据={
“计数器A”：[“CounterA1.jpg”、“CounterA2.jpg”]，
“计数器B”：[“CounterB1.jpg”]，
“计数器C”：[“CounterC1.jpg”]
}
var计数器={}；
var name={}；
var标志={}；
var对象={}；
for（var输入数据）{
变量编号=[对象]；
var新卡=$(`


`);
var ul_innerhtml=“”；
$（“.card header”，newCard）.text（键）；
数据[key].forEach（d=>{
ul_innerhtml+='
'+d+'
'
对象[i++]=key+“，“+d+”，“+false；
});
$（“.list group”，newCard）.append（ul_innerhtml）；
$（“.card”）.append（newCard.html（））；
}
$（“#btn”）。单击（函数（）{
console.log（number）//仅打印计数器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%；
}

去
如果要动态创建UI，则可以从此类UI动态创建数据检索

我已经提供了工作代码，可以满足您的要求。但这不是一个答案

尽量避免生成HTML，
.append（jq.HTML（））
，这样问题就会更容易理解和解决


var i=0；
函数updateObj（数据）{
//编写代码将标志从false更新为true；
}
风险值数据={
“计数器A”：[“CounterA1.jpg”、“CounterA2.jpg”]，
“计数器B”：[“CounterB1.jpg”]，
“计数器C”：[“CounterC1.jpg”]
}
var计数器={}；
var name={}；
var标志={}；
var对象={}；
var elementsWithState=[]；
for（让输入数据）if（Object.prototype.hasOwnProperty.call（Data，key））{
var新卡=$(`


`
);
设ulFragment=document.createDocumentFragment（）；
$（“.card header”，newCard）.text（键）；
数据[key].forEach（d=>{
设li=document.createElement（'li'）；
li.className='列表组项'；
li.innerHTML=d+“”；
附属器碎片（li）；
让checkboxEl=li.querySelector（'input[type=“checkbox”]”）；
elementsWithState.push({
getState（）{
返回{
柜台：钥匙，
姓名:d,，
IsActive:复选框L.checked？'Y'：'N'，
};
},
});
});
$（“.list group”，newCard）.append（ulFragment）；
$（“.card”）.append（新卡）；
}
$（“#btn”）。单击（函数（）{
让状态=[]；
elementsWithState.forEach（（{getState}）=>{
state.push（getState（））；
});
console.log（状态）；
})
开关{
位置：相对位置；
显示：内联块；
宽度：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%；
}

去
任何投了反对票的人，我可以知道原因吗？请提供更多相关代码。就像你的foreach循环和HTML一样。你可以看看我放在一起的这个演示，这只是为了数据迭代和制作你想要的数组对象，而不是在UI@webbanditen上。请清楚地查看我的代码。我已经提供了一个工作片段done@DucHong但是我想用
UI