所以我有这个画廊页面，其中有多个 <img>带有独特图片的标签。单击图片应将您带到另一个网页，其中包含有关该特定图片的更多信息。因此，所有onclick() s 是唯一的，具体取决于图像的 src。
现在，鉴于所有这些 <img>除了图片之外，标签几乎是相同的，我决定使用 JavaScript 将所有标签放在一个循环中，如下所示:
加载ImageGalleryData
for (var i = 0; i < 21; i++) {
var imgSrc = "http://localhost:63342/Performance%20Task/Website/imgs/gallery/img/" + i + ".jpg";
console.log(imgSrc);
var imgDiv = document.createElement('div');
imgDiv.className = "img";
var descDiv = document.createElement('div');
descDiv.className = "desc";
var imgView = document.createElement('img');
imgView.src = imgSrc;
imgView.onclick = (function() {{openWebpage(imgSrc);}})();
console.log(imgSrc);
imgView.width = 300;
imgView.height = 200;
imgDiv.appendChild(imgView);
imgDiv.appendChild(descDiv);
document.getElementsByTagName('body')[0].appendChild(imgDiv);
}
openWebpage()特别是这个函数:
openWebpage()
function openWebpage(src) {
var orig = window.document.title;
window.document.title = src;
open("imagePage.html");
}
imagePage 有一个 jscript，它告诉它自己的 img 和 div 标签显示图像，其源是从 window.document.opener.title 或类似的东西接收的。
所有图像都已构建，但 onclick()不注册。在 Chrome 的开发者模式下查看，图像没有 onlick()属性。
另外，如果我更改这段代码:
imgView.onclick = (function() {{openWebpage(imgSrc);}})();
进入此:
imgView.onclick = function() {openWebpage(imgSrc);};
onlick()确实注册，但同时针对每个图像，使用创建的最后一个图像的 src 进行注册。因此，当我单击图片 1 时，它会转到图片 22 的信息。其他所有图片也是如此。都是相同的信息。
我在这里做错了什么？
编辑:附加信息
imagePage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/imagePage.css"/>
<script src="jscript/imageData.js"></script>
<script src="jscript/loadImageData.js"></script>
</head>
<ul>
<li><a href="homepage.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<body>
<div>
<h1 id="imageTitle">TESTTITLE</h1>
</div>
<div>
<img id="imageView">
</div>
<div class="boxed" id="imageDesc">
</div>
</body>
</html>
加载图像数据
window.onload = function() {
var imageSrc = opener.document.title;
var imageDesc = map[imageSrc];
var imageView = document.getElementById("imageView");
var imageDescView = document.getElementById("imageDesc");
imageView.src = imageSrc;
imageDescView.innerHTML = imageDesc;
};
最佳答案
在循环的最后一次迭代中，您将 imgSrc 设置为图片 22 的 url。因此，在单击事件中，您的函数 openWebPage 将在参数中使用该 url 进行触发。
关于javascript - 在 Javascript 循环中以编程方式为 imgs 设置唯一的 onclicks，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42611548/