Question

我正在为课程分配工作，这是我想要的代码太多了。我尝试为函数执行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

如何缩短这个JS代码？

1 个答案: