更简单的方法来编码一系列图像javascript

Question

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

我想知道是否有人知道更好的方法来创建多个缩略图的onclick事件我想使这个扩展。

此外，请考虑只有javaScript的答案，因为我不写在jQuery（还！）。

var img = document.getElementById("galleryImg"); 
 
var thumb = document.getElementsByClassName("imgThumb"); 
 
var p0 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic1.png"; 
 
var p1 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic2.png"; 
 
var p2 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic3.png"; 
 
var p3 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic4.png"; 
 
var p4 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic5.png"; 
 
var 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()}; 
 
function pic0(){img.src = pArray[0]}; 
 

 
thumb[1].onclick = function(){pic1()}; 
 
function pic1(){img.src = pArray[1]}; 
 

 
thumb[2].onclick = function(){pic2()}; 
 
function pic2(){img.src = pArray[2]}; 
 

 
thumb[3].onclick = function(){pic3()}; 
 
function pic3(){img.src = pArray[3]}; 
 

 
thumb[4].onclick = function(){pic4()}; 
 
function pic4(){img.src = pArray[4]}; 
 

 
thumb[5].onclick = function(){pic5()}; 
 
function pic5(){img.src = pArray[5]};

Answer 1

假设你必须在pArray元素相同数量的你将有缩略图，你可以这样做：

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

它通过迭代的缩略图，附加onclick处理程序，并根据元素的索引为主图像分配相应的图像。

Answer 2

您重复遍历数组，但是单独使用循环并不能完全解决问题，因为您在循环内部指定了一个函数，这意味着任何外部变量在执行onclick之前可能会发生更改。

所以你需要的是封闭。

1. 创建设置onclick回调
2. 呼叫，在一个循环功能的功能。

下面是一个例子：

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

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

这个功能是很常见的，所以它也被Array#forEach实施：

pArray.forEach(function(imgSrc, index) { 
    thumb[index].onclick = function() { img.src = imgSrc; }; 
}); 

Answer 3

您可以使用loop任何阵列，我们通常使用for loop作为相关数组。

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

尝试：https://jsfiddle.net/Zay_DEV/8r1gqnfx/

var img = document.getElementById("galleryImg"); 
 
var thumb = document.getElementsByClassName("imgThumb"); 
 
var pArray = [ 
 
\t "https://dl.dropboxusercontent.com/u/89495286/test/images/pic1.png", 
 
    "https://dl.dropboxusercontent.com/u/89495286/test/images/pic2.png", 
 
    "https://dl.dropboxusercontent.com/u/89495286/test/images/pic3.png", 
 
    "https://dl.dropboxusercontent.com/u/89495286/test/images/pic4.png", 
 
    "https://dl.dropboxusercontent.com/u/89495286/test/images/pic5.png", 
 
    "https://dl.dropboxusercontent.com/u/89495286/test/images/pic6.png" 
 
] 
 

 
for (var i = 0; i < thumb.length; i++) { 
 
\t thumb[i].src = pArray[i]; 
 
\t thumb[i].onclick = function() { img.src = this.src; }; 
 
} 
 

 
thumb[0].onclick();

#galleryImg { max-height: 25vh; } 
 
.imgThumb { width: 100px; height: 50px; }

<img id="galleryImg"/> 
 
<br /> 
 

 
<img class="imgThumb"/> 
 
<img class="imgThumb"/> 
 
<img class="imgThumb"/> 
 
<img class="imgThumb"/> 
 
<img class="imgThumb"/> 
 
<img class="imgThumb"/>