将功能连接到从PC文件夹显示的照片

Question

我对JS和编程很陌生，所以如果解释有点草率，我提前很抱歉，但我会尽量说清楚。

所以我要做的是有一个JS代码，它可以读取和显示(在HTML页面中(PC文件夹中的照片，使它们可点击，然后单击它会将您重定向到具有相同照片但高分辨率的页面。

现在，我有这段显示所述图片的代码，但问题是我似乎无法弄清楚如何将其"连接"到图片并使它们可点击。更困难的是，我试图使所有这些代码动态化(正如您在下面的代码中看到的那样(，因此我不希望有任何图片等的硬编码标题。

var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
appendImage();
}
var tryLoadImage = function(index){
tempImg.src = 'img/' + index + '.jpg';
}
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
document.body.appendChild(img)
tryLoadImage(index++);
}
tryLoadImage(index);

非常感谢任何帮助，非常感谢！

Answer 1

您可以通过向图像添加onclick功能来使图像可点击。尝试这样的事情：

var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
img.onclick = e => {
// do something you want to show the full picture like this maybe
var el = document.getElementById("fullpictureid");
if (el && e.target.src) {
el.src = e.target.src;
// so that it sets "src" in <img id="fullpictureid"> for example 
}
};
document.body.appendChild(img)
tryLoadImage(index++);
}