用javascript编写一系列图像的更简单方法

在下面的代码中，我成功地做到了这一点，因此当有人单击图片的缩略图时，它的完整图片将出现在目标中

我想知道是否有人知道为多个缩略图创建onclick事件的更好方法，我想让它可以扩展

也请考虑JavaScript答案，因为我不在jQuery中编写（但是！）

var img=document.getElementById（“GalleryMg”）；
var thumb=document.getElementsByClassName（“imgThumb”）；
变量p0=”https://dl.dropboxusercontent.com/u/89495286/test/images/pic1.png";
变量p1=”https://dl.dropboxusercontent.com/u/89495286/test/images/pic2.png";
变量p2=”https://dl.dropboxusercontent.com/u/89495286/test/images/pic3.png";
变量p3=”https://dl.dropboxusercontent.com/u/89495286/test/images/pic4.png";
变量p4=”https://dl.dropboxusercontent.com/u/89495286/test/images/pic5.png";
变量p5=”https://dl.dropboxusercontent.com/u/89495286/test/images/pic6.png";
var pArray=[p0、p1、p2、p3、p4、p5]
img.src=pArray[0]；
thumb[0]。onclick=function（）{pic0（）}；
函数pic0（）{img.src=pArray[0]}；
thumb[1]。onclick=function（）{pic1（）}；
函数pic1（）{img.src=pArray[1]}；
thumb[2]。onclick=function（）{pic2（）}；
函数pic2（）{img.src=pArray[2]}；
thumb[3].onclick=function（）{pic3（）}；
函数pic3（）{img.src=pArray[3]}；
thumb[4].onclick=function（）{pic4（）}；
函数pic4（）{img.src=pArray[4]}；
thumb[5]。onclick=function（）{pic5（）}；
函数pic5（）{img.src=pArray[5]}假设
pArray
中的元素数量与缩略图中的元素数量相同，则可以执行以下操作：

Array.prototype.forEach.call(thumb, function(thumbItem, index) {
  thumbItem.onclick = function() {
    img.src = pArray[index];
  };
});

它遍历缩略图，附加
onclick
处理程序，并根据元素的索引为主图像分配相应的图像。
但是，仅使用循环并不能完全解决问题，因为在循环中分配函数，这意味着在执行
onclick
之前，任何外部变量都可能发生变化

所以你需要的是结束

创建一个函数，用于设置
onclick
回调
在循环中调用该函数
下面是一个例子：

function setOnClick(element, imgSrc) {
  element.onclick = function() { img.src = imgSrc; };
}

for (var i = 0; i < thumb.length; i++) {
  setOnClick(thumb[i], pArray[i]);
}

您可以对任何数组使用
循环
，我们通常对相关数组使用
循环

for (var i = 0; i < thumb.length; i++) {
    thumb[i].src = pArray[i]; // change if different src
    thumb[i].onclick = function() { img.src = this.src; };
}




您了解阵列了吗？当然。我想知道是否有更好的方法从数组中调用项并向其附加onclick函数。这样，理论上我可以添加任意数量的缩略图（或任何其他项）。数组与循环是同步的。是的，我正要发布类似的内容，只是我建议使用
[].forEach.call
而不是
数组.prototype.forEach
=PYeah，这是可行的，但是我更喜欢明确：）。由于
pArray
是一个数组，您可以将其用作
forEach
的基础，谢谢！工作完美。我会研究一下这个新代码，看看它为什么能工作。我不认为
thumb
应该有
src
。如果是缩略图，它可能有不同的图像文件。不过，这个

使用得很好。我同意。但是，如果您不介意使用原始图像的较小版本，这是一个好主意。而且它不必创建更小的缩略图，从而减少上传带宽。我得考虑一下这个问题。

for (var i = 0; i < thumb.length; i++) {
    thumb[i].src = pArray[i]; // change if different src
    thumb[i].onclick = function() { img.src = this.src; };
}