我有一组HTML带有 ID 的图像"Hole#" ex: "Hole1", "Hole2" ... "HoleN".这些 IMG 标签正在加载本地存储的图像。我的目标是在单击其中一个图像时打印一个alert。我发现了另一个我认为可以回答我的问题的 StackOverflow 问题。我已将其合并到下面的代码中。不幸的是，它没有达到预期的效果。//Dynamically creates imagesfor (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"); }; };HTML： <section id="holes"> </section>"img[id|=hole]"但是用替换代码"hole1"确实有效（对于hole1），所以我已经结束了我的语法ID选择。
2 回答
狐的传说
TA贡献1804条经验 获得超3个赞
id在所有图像上使用相似 s 的整个想法是错误的方法。
请改用通用的 CSS 类。然后，要找出单击了哪个图像，请使用单个委托侦听器并使用自动传递给单击处理程序的事件对象。我正在向您展示一个带有按钮而不是图像的示例：
const buttonDiv = document.querySelector('.buttons');
// lets add some buttons
for (let i = 0; i < 5; i++) {
let button = document.createElement('button');
button.type = 'button';
button.className = 'button';
button.textContent = 'Button Number ' + i;
buttonDiv.appendChild(button);
}
// now let's add a delegate click listener on the div containing the buttons
buttonDiv.addEventListener('click', function(event) {
// in any event listener, the event object has a `target` property, telling you which element the event was raised on
// this allows us to only react in the click listener if the clicked element meets certain conditions
if (event.target.matches('button.button'))
console.log('you clicked on ' + event.target.textContent);
})
.buttons {
background-color: #f0f0f0;
padding: 10px;
}
<div class="buttons"></div>
蝴蝶刀刀
TA贡献1801条经验 获得超8个赞
尝试这个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="holes"></section>
<script>
loadImages(2);
function loadImages(NUM_HOLES){
const sectionHoles = document.getElementById('holes');
//Dynamically creates images
for (let i = 1; i <= NUM_HOLES; i++) {
let HoleID = `hole${i}`;
let HoleIDPic = `holePic${i}`;
let div = document.createElement('div');
let img = document.createElement('img');
div.id = HoleID;
img.id = HoleIDPic;
img.src = "someimage.png";
// put image element in div
div.appendChild(img);
// put div in section
sectionHoles.appendChild(div);
// adding event listener to the img element
document.getElementById(HoleIDPic).addEventListener('click', function(){
alert(HoleIDPic + 'clicked');
});
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消