javascript - 使用 Javascript 在单击时显示图库中的图像

Question

我正在尝试学习 Javascript，我想编写一个脚本，允许用户单击图库中的图像(这些图像恰好是水獭)，并将该图像聚焦在页面中央.我的目标是让脚本遍历页面上的每个图像，并为每个图像分配一个函数，以便在用户单击时聚焦图像的源更改为单击图像的源。我一直没有成功。

我的相关html代码是:

      <div class="gallery">
        <img src= "otter1.png")/>
        <img src= "otter2.png")/>
        <img src= "otter3.png")/>
        <img src= "otter4.png")/>
        <img src= "otter5.png")/>
        <img src= "otter6.png")/>
      </div>

    <div class="focus">
      <img id="focus" src="otter1.png">
    </div>

相关CSS代码:

.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

.gallery img:hover {
    border: 1px solid #777;

}


.gallery img {
    width: 100%;
    height: auto;
}

.focus {
  position: fixed;
  text-align: center;
  vertical-align: center;
  margin-left: 50px;
  margin-top: 100px;
  border: 4px solid white;
}

最重要的是 javascript:

window.onload = function() {
    var imgs = document.getElementsByTagName('img');
    for(var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        img.onclick = function() {
            newSrc = img.getAttribute('src'); /* problem line ?*/
            focus = document.getElementById('focus');
            focus.src = 'newSrc';
        }
    }
}

我的功能出了什么问题(如果问题只是功能)，我怎样才能让它工作？我尝试在控制台中记录功能事件，但仍然对到底发生了什么感到困惑。

我试着寻找:How do you set a JavaScript onclick event to a class with css和 http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb但无法正确应用任何一种方法。

如果不清楚或太长，我深表歉意，这是我的第一篇文章。

Answer 1

真正的问题是你的临时 img 将始终包含 onclick 被触发时的最后一个图像，因为匿名函数(你用来处理 onclick) 不是实时抓取变量，是在调用时抓取变量。

您可以在 onclick 事件中使用 this 关键字来抓取当前图像:

window.onload = function() {
    var imgs = document.getElementsByTagName('img');
    for(var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        img.onclick = function() {
            newSrc = this.src; //this = reference to image that fired onclick
            focus = document.getElementById('focus');
            focus.src = newSrc; //no quotes for variable references!
        }
    }
}

希望这对您有所帮助!