javascript - 将功能连接到 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++);
}