更簡單的方法來編碼一系列圖像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"/>