新しいウィンドウでスライダーからimgを開く方法

Question

imgタグで非常に大きな画像セットを持つ画像スライダーを作成しました。私は、スライダ内の画像をクリックすると、新しいタブ/ウィンドウで開くコードを作成しようとしています。ここで私がこれまで持っているものです。

var allSlides = document.querySelectorAll('.slide img'); 

for(i = 0; i < allSlides.length; i++){ 
    allSlides[i].addEventListener("click", function(){ 
     window.open(allSlides[i].src); 
    }) 
} 

私はコンソールに[0] allSlidesを入力すると、私は良い出力を得る（例えば<img src="123">が、私は画像をクリックすると、私はエラー「キャッチされない例外TypeErrorを取得：読み取ることができません。 HTMLImageElementで未定義のプロパティ「SRC」。<anonymous>」。

私が間違って何をしているのですか？

Answer 1

あなたが持っている問題は、クロージャである。あなたclick画像、iはの長さになるだろうされている場合allSlidesで定義したiではなくループ。あなたはまた、それが好きでした

allSlides[i].addEventListener("click", function(event){ 
    window.open(event.target.src); 
}); 

：

allSlides.forEach(function(slide) { 
    slide.addEventListener("click", function(){ 
    console.log(slide.src); 
    }); 
}); 

をごとに異なるスコープを作成し、あなたは次のようにクリックされた要素のソースを使用し、いっそのクリックハンドラにiをバインドする必要があり、どちらかスライド、forループの必要性を取り除きます。

Answer 2

ありがとうございます！少し違った方法でこれを使用しました。

var allSlides = document.querySelectorAll('.slide img'); 

for(i = 0; i < allSlides.length; i++){ 
    allSlides[i].addEventListener("click", function(){ 
     window.open(this.src); 
    }); 
} 

今すぐ使えるようになりました。本当にありがとう！