Javascript 如何在所选div上附加类？

如何在所选div上附加复选标记图标？我将提供我的代码。在这种情况下，我只在第一个div上附加复选标记图标。 代码笔：

函数handleMyButtonClick（e）{
控制台日志（e）
document.getElementById（“检查图标”）.style.display=“块”；
}

。第二列div{
显示器：flex；
证明内容：中心；
填充：50px；
}
#检查图标{
显示：无；
背景图片：url(https://cdn1.iconfinder.com/data/icons/social-messaging-ui-color/254000/36-512.png)！重要；
背景重复：不重复！重要；
背景位置：中间偏右！重要；
背景尺寸：60px 60px！重要；
最大宽度：未设置！重要；
最小高度：未设置！重要；
位置：绝对位置；
最高：25%；
光标：指针；
右：10%；
宽度：50px；
高度：50px；
}

1.
卡茨
毛西
富里奥索
沙特林

问题在于您多次使用

id

属性。ID必须是唯一的

getElementById

将获取第一个且仅获取第一个id，因为它假定此不变量

我建议您使用一个类（

.check icon

），并在目标上使用

querySelector

查找复选标记子项：

函数handleMyButtonClick（e）{
for（让document.queryselectoral的元素（“.check图标”））{
element.style.display=“无”；
}
e、 querySelector（“.check icon”）.style.display=“block”；
}

。第二列div{
显示器：flex；
证明内容：中心；
填充：50px；
}
.检查图标{
显示：无；
背景图片：url(https://cdn1.iconfinder.com/data/icons/social-messaging-ui-color/254000/36-512.png)！重要；
背景重复：不重复！重要；
背景位置：中间偏右！重要；
背景尺寸：60px 60px！重要；
最大宽度：未设置！重要；
最小高度：未设置！重要；
位置：绝对位置；
最高：25%；
光标：指针；
右：10%；
宽度：50px；
高度：50px；
}

1.
卡茨
毛西
富里奥索
沙特林

编写一个函数，为每个需要单击的div分配一个事件侦听器，会更容易/更好。在此函数中，添加了向“选定”复选框添加复选框的逻辑

该函数将如下所示：

document.queryselectoral（'.select css'）.forEach（div=>div.addEventListener（'click'，（e）=>{
e、 target.querySelector（'.check icon'）.style.display='block'；
}));
。第二列div{
显示器：flex；
证明内容：中心；
填充：50px；
}
.检查图标{
显示：无；
背景图片：url(https://cdn1.iconfinder.com/data/icons/social-messaging-ui-color/254000/36-512.png)！重要；
背景重复：不重复！重要；
背景位置：中间偏右！重要；
背景尺寸：60px 60px！重要；
最大宽度：未设置！重要；
最小高度：未设置！重要；
位置：绝对位置；
最高：25%；
光标：指针；
右：10%；
宽度：50px；
高度：50px；
}

1.
卡茨
毛西
富里奥索
沙特林
当我现在使用您的代码时，每个字段都被选中。我的另一个代码阻塞显示中可能有任何类：none。还有一个问题。如何选择禁用的多个选项。只有一个选择是可能的？！对不起，亚历克斯，但我根本不明白你的问题如何才能检查只有一个问题？@Philip在这种情况下，我可以检查几个answear。我想只能选中一个？那么您希望一次只显示一个选中标记？如果是这种情况，您可以循环查看所有
。选中图标
，将其显示设置为
none
，然后选择单个
。选中图标
，您希望
阻止
。如何只检查一个问题？在这种情况下，我可以检查几个答案。我想只检查一个？