-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

新しい関数を作成するには、カリー化手法を使用する必要があります。

これはクラスの課題なのであまり多くは割愛しますが、基本的なコンセプトは次のとおりです。

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 に答える