如何在新窗口中从滑块打开 img答案

【问题标题】：How to open an img from a slider in a new window如何在新窗口中从滑块打开 img
【发布时间】：2017-05-30 14:48:14
【问题描述】：

我创建了一个图像滑块，其中包含大量 img 标签中的图像。我正在尝试创建代码，当单击滑块中的图像时，它会在新的选项卡/窗口中打开。到目前为止，这是我所拥有的：

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

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

当我在控制台中输入 allSlides[0] 时，我得到了很好的输出（例如 <img src="123">，但是当我单击图像时，我收到错误“Uncaught TypeError: Cannot read property 'src' of undefined at HTMLImageElement. <anonymous>"。

我做错了什么？

【问题讨论】：

window.open(event.target.src)
window.open(this.src);

标签： javascript

【解决方案1】：

您遇到的问题是由于关闭。当您 click 图像时，i 将是 allSlides 的长度，而不是您在循环中定义的 i。您需要将i 绑定到单击处理程序，或者更好的是，使用单击元素的源，例如：

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

你也可以这样做：

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

为每张幻灯片创建不同的范围，无需 for 循环。

【讨论】：

【解决方案2】：

感谢您的回答！我用了它，用一个稍微不同的解决方案，得到了这个：

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

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

现在可以了！非常感谢！

【讨论】：