Javascript 框显示警报，但我需要其他方法，如使用if链或开关，或使用for循环或使用map运算符

当您运行我的代码并单击所有三个框时，您会得到每个框的一些警报，但我需要警报的任何替代代码，就像在我的代码中我使用了三次查询选择器，但我想知道，不使用三次查询选择器，但只对所有框和内部eventlistener使用一次，使用类似if链或循环来显示警报当我们点击时，框

我使用查询选择器3次，如下所示，如果使用if链或循环来警告彩色框，是否有任何变化

function hi（）{//这里使用的是queryselector，但我希望使用if链或循环来显示对有色框的警报
document.querySelector（'.green'）。addEventListener（'click'，（）=>{
警惕（‘嗨，我是绿色的`）
})
document.querySelector（'.blue'）。addEventListener（'click'，（）=>{
警惕（‘嗨，我是蓝色的`）
})
document.querySelector（'.orange'）。addEventListener（'click'，（）=>{
警惕（‘嗨，我是桔子’）
})
}
您好（）

.box{
宽度：600px；
高度：70像素；
文本对齐：居中；
字体大小：55px；
字体大小：粗体；
保证金：自动；
边缘底部：50px；
利润上限：70像素；
垫面：0.6%；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
.橙色{
背景颜色：橙色；
}
h1{
文本对齐：居中；
字体大小：55px；
字体大小：粗体；
}

我是钢铁侠
我是绿色的
我是蓝色的
我是橙色的

我想你可能正在寻找类似的东西，如果这不是你想要的，请告诉我，我会相应地编辑我的答案：

函数hi（）{
document.querySelectorAll（'.box'）.forEach（box=>{
box.addEventListener（'单击'，（e）=>{
警报（`hi i'm a${e.target.className.replace（'box'，''.trim（）}`）
})
})
}

您可以将类

box

添加到每个div和带有div颜色的id，然后您可以使用

document.querySelectorAll（'.box'）

并在该数组上迭代。在此迭代中，您可以检查div的id，并根据div id显示allert

例如：

HTML

我是钢铁侠
我是绿色的
我是蓝色的
我是桔子

JS

函数hi（）{
const colorboxs=document.querySelectorAll（'.box'）；
颜色框。forEach（框=>{
box.addEventListener（'单击'，（）=>{
如果（box.id==“绿色”）{
警惕（‘嗨，我是一个绿色的’）；
}else if（box.id=='blue'）{
警惕（嗨，我是蓝色的）；
}否则{
警惕（‘嗨，我是桔子’）；
}
})
});
}

要想在这里实现什么目标有点困难，你能提供一些关于你试图改变/修复/完成什么的详细信息吗？当你运行我的代码并单击所有三个框时，你会得到每个框的一些警报，但我想要任何警报的替代代码，就像我的代码中我使用的三次查询选择器一样，但我想知道，不使用三次查询选择器，但只使用一次Box和inside eventlistener在我们单击Array.prototype.forEach.call时，使用like if chain或loop for来显示框的警报在现代系统中似乎并不必要browsers@mplungjan是的，我觉得写这篇文章很肮脏，我将它改为将HTML集合转换为数组，并对其执行forEach。虽然感觉还是不够理想，但你能推荐一种更高效/更干净的方法吗？我喜欢

[…document.queryselectoral（“.box”）]。forEach

或没有[…]的IE需求it@Kanow正确，最初我使用的是

document.getElementsByCassName

，它返回一个HTMLCollection（其中无法应用数组方法），但是在切换到

document.querySelectorAll

之后，它返回可以使用数组方法的节点列表（因此会使转换到数组变得冗余）