Javascript 基于子字符串选择ID

我的

HTML

中有一组图像，ID为

“Hole”#例如：“Hole1”，“Hole2”。。。“HoleN”。

这些IMG标签正在加载本地存储的图像。我的目标是在单击其中一个图像时打印

警报

我发现了一个我认为可以回答我问题的问题。我已将其合并到下面的代码中。不幸的是，它没有达到预期的效果

//Dynamically creates images
for (let i = 1; i <= NUM_HOLES; i++) {
    let HoleID = `"hole${i}"`;
    let HoleIDPic = `"holePic${i}"`;
    holesString +=
    `<div id=`+ HoleID + `>
    <img id=` + HoleIDPic + ` src="" />
    </div>`
}

window.onload = function() {
      document.getElementById("img[id|=hole]").onclick = function()
      {
         alert("Clicked");
      };
   };

//动态创建图像
对于（让i=1；i试试这个




文件
加载图像（2）；
函数加载图像（孔数）{
const sectionHoles=document.getElementById（'holes'）；
//动态创建图像
对于（设i=1；i而言，在所有图像上使用类似的
id
s的整个想法是错误的

改用一个公共CSS类。然后，要找出单击了哪个图像，请使用单个委托侦听器，并使用自动传递给单击处理程序的事件对象。我将向您展示一个按钮而不是图像的示例：


const buttonDiv=document.querySelector（'.buttons'）；
//让我们添加一些按钮
for（设i=0；i<5；i++）{
let button=document.createElement（'button'）；
button.type='button'；
button.className='button'；
button.textContent='按钮编号'+i；
按钮iv.追加子项（按钮）；
}
//现在，让我们在包含按钮的div上添加一个委托单击侦听器
buttonDiv.addEventListener（'click'，函数（事件）{
//在任何事件侦听器中，事件对象都有一个'target'属性，告诉您引发事件的元素
//这只允许我们在click元素满足某些条件时，在click侦听器中做出反应
if（event.target.matches（'button.button'））
log（'您单击'+event.target.textContent'）；
})
。按钮{
背景色：#f0；
填充：10px；
}
试试这个：
img[id*='Hole']
。你能分享你的html吗？
文档。querySelectorAll（'img[id^=Hole]'））
将为您提供id以“洞”开头的图像。感谢您的帮助！这解决了我的问题，如果可以的话，我会投票给您-请接受我的感谢！干杯！您可以添加一些关于这如何解决问题的信息吗？我很高兴Chris认为这解决了他的问题，但其他读者无法轻松阅读没有文本。这是一个很好的解决这个问题的方法，非常优雅。我的问题也被上面的另一个人解决了，但我感谢你的帮助！以后我一定会交替使用这个方法，因为它看起来比我现在的方法更干净。
   <section id="holes">

   </section>