如何縮短這個JS代碼？

Question

我正在爲班級進行任務，這是waaaaayyy對於我想要的太多代碼。我試着做一個功能for循環（即功能replacepicture[x]），但不起作用...幫助？

var img = new Array("images/flying-car-593.jpg", "images/flyingCar-article.jpg", "images/flying-car-m400.jpg", "images/high-road-aerocar.jpg", "images/log200711a.jpg","images/saucercarSplash_450x325.jpg"); 
console.log(img); 
var caps = new Array("Picture 1","Picture 2","Picture 3","Picture 4","Picture 5","Picture 6"); 
console.log(caps); 
var thumbs = document.getElementsByTagName('img'); 
console.log(thumbs); 

thumbs[0].setAttribute('alt', caps[0]); 
thumbs[1].setAttribute('alt', caps[1]); 
thumbs[2].setAttribute('alt', caps[2]); 
thumbs[3].setAttribute('alt', caps[3]); 
thumbs[4].setAttribute('alt', caps[4]); 
thumbs[5].setAttribute('alt', caps[5]); 

function replacePicture1(events){ 
    event.preventDefault(); 
    var fullviewDiv= document.getElementById('fullview'); 

    while(fullviewDiv.hasChildNodes()){ 
     fullviewDiv.removeChild(fullviewDiv.lastChild); 
    } 

    var newImage1 = document.createElement('img'); 
    newImage1.setAttribute('src', img[0]); 
    newImage1.setAttribute('alt', caps[0]); 
    fullviewDiv.appendChild(newImage1); 

}function replacePicture2(events){ 
    event.preventDefault(); 
    var fullviewDiv= document.getElementById('fullview'); 

    while(fullviewDiv.hasChildNodes()){ 
     fullviewDiv.removeChild(fullviewDiv.lastChild); 
    } 

    var newImage2 = document.createElement('img'); 
    newImage2.setAttribute('src', img[1]); 
    newImage2.setAttribute('alt', caps[1]); 
    fullviewDiv.appendChild(newImage2); 

} 

function replacePicture3(events){ 
    event.preventDefault(); 
    var fullviewDiv= document.getElementById('fullview'); 

    while(fullviewDiv.hasChildNodes()){ 
     fullviewDiv.removeChild(fullviewDiv.lastChild); 
    } 

    var newImage3 = document.createElement('img'); 
    newImage3.setAttribute('src', img[2]); 
    newImage3.setAttribute('alt', caps[2]); 
    fullviewDiv.appendChild(newImage3); 

} 

function replacePicture4(events){ 
    event.preventDefault(); 
    var fullviewDiv= document.getElementById('fullview'); 

    while(fullviewDiv.hasChildNodes()){ 
     fullviewDiv.removeChild(fullviewDiv.lastChild); 
    } 

    var newImage4 = document.createElement('img'); 
    newImage4.setAttribute('src', img[3]); 
    newImage4.setAttribute('alt', caps[3]); 
    fullviewDiv.appendChild(newImage4); 

} 

function replacePicture5(events){ 
    event.preventDefault(); 
    var fullviewDiv= document.getElementById('fullview'); 

    while(fullviewDiv.hasChildNodes()){ 
     fullviewDiv.removeChild(fullviewDiv.lastChild); 
    } 

    var newImage5 = document.createElement('img'); 
    newImage5.setAttribute('src', img[4]); 
    newImage5.setAttribute('alt', caps[4]); 
    fullviewDiv.appendChild(newImage5); 

} 

function replacePicture6(events){ 
    event.preventDefault(); 
    var fullviewDiv= document.getElementById('fullview'); 

    while(fullviewDiv.hasChildNodes()){ 
     fullviewDiv.removeChild(fullviewDiv.lastChild); 
    } 

    var newImage6 = document.createElement('img'); 
    newImage6.setAttribute('src', img[5]); 
    newImage6.setAttribute('alt', caps[5]); 
    fullviewDiv.appendChild(newImage6); 

} 


function init() { 

var fullviewDiv = document.getElementById('fullview'); 


var picture1 = document.getElementById('picture1'); 
picture1.addEventListener('click',replacePicture1,false); 
var picture2 = document.getElementById('picture2'); 
picture2.addEventListener('click',replacePicture2,false); 
var picture3 = document.getElementById('picture3'); 
picture3.addEventListener('click',replacePicture3,false); 
var picture4 = document.getElementById('picture4'); 
picture4.addEventListener('click',replacePicture4,false); 
var picture5 = document.getElementById('picture5'); 
picture5.addEventListener('click',replacePicture5,false); 
var picture6 = document.getElementById('picture6'); 
picture6.addEventListener('click',replacePicture6,false); 

} 

window.addEventListener('load',init,false); 

Answer 1

您應該使用Currying技術來創建新的功能。

由於這是一個課堂作業，我不會透露太多，但基本的概念是這樣的：

function createAdder(a) { 
    return function(b) { 
     return a + b; 
    } 
} 

var add3 = createAdder(3); // add3 is now function(b) { ... } with a = 3 
add3(2) == 3 + 2; 
add3(5) == 3 + 5; 

您可以應用此技術來創建功能createPictureReplacer(source, alt)，這反過來又返回新功能replacePicture(event);

全部放在一起，你會添加下列事件偵聽器，使用一個簡單的for循環

picture[i].addEventListener(
    'click', 
    createPictureReplacer(imgSrc[i], imgAlt[i]), 
    false 
); // where i is the iterator of a for-loop