Question

所以我有这个图库页面，其中有多个<img>标签，带有独特的图片。点击图片会带您进入另一个网页，其中包含有关该特定图片的更多信息。因此，所有onclick()都是唯一的，具体取决于图像的src。

现在，鉴于所有这些<img>标签实际上是相同的，除了图片，我决定使用JavaScript将它们全部放在一个循环中，如下所示：

loadImageGalleryData

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，它告诉ITS OWN img和div标签显示图像，其源是从window.document.opener.title或类似的东西接收的。

所有图像都已构建，但onclick()未注册。浏览Chrome中的开发者模式，图片没有onlick()属性。

此外，如果我更改此代码段：

 imgView.onclick = (function() {{openWebpage(imgSrc);}})();

进入这个：

 imgView.onclick = function() {openWebpage(imgSrc);};

onlick() DOES注册，但同时为每个图像创建最后一个图像的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>

loadImageData

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;
};

Answer 1

在循环的最后一次迭代中，将imgSrc设置为图片22的url。因此，在click事件中，您的函数openWebPage将在参数中使用该url触发。

Answer 2

试试这个。

imgView.addEventListener("click", function() {openWebpage(imgSrc);});

在Javascript中以编程方式将独特的onclicks设置为循环中的imgs

2 个答案: