-1

我正在为班级做作业，这对于我想要的东西来说太多了。我尝试为函数（即 function ）做一个 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);
4

1 回答 1

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
于 2013-04-10T01:22:19.320 回答