javascript - 事件委托(delegate)点击缩略图不显示主图像

Question

我尝试创建缩略图，单击后会显示在主图像中。我已经测试了代码，一切似乎都井井有条，但是单击缩略图时未显示主要图像。 Chrome 中显示 404 错误消息。我知道文件路径是正确的，因为当我删除 preventDefault() 时，链接会显示包含图像的文件 ?

我已经玩了一段时间了。我没有看到的代码中是否有错误或我没有考虑的某些操作。我是 JavaScript 的新手。

    <img id="viewer" src="images/motorbike-girl.jpg" width='450px' />
    <div id='thumbs'>
       <a href='images/chicks.jpg'><img src='images/chicks-thumb.jpg'/></a>
       <a href='images/motorbike-girl.jpg'><img src='images/motorbike-girl-thumb.jpg'/></a>
       <a href='images/yamaha.jpg'><img src='images/yamaha-thumb.PNG' /></a>
    </div>

 var thumbs = document.getElementById('thumbs');
 var img = document.getElementById('viewer');

 thumbs.onclick = function(event) {

   var target = event.target;

   while(target != thumbs) {

    if(target.nodeName == 'A') {
      img.src = this.href;
      event.preventDefault();
    }
     target = target.parentNode;

  }
}

Answer 1

这一行:

img.src = this.href;

应该是:

img.src = target.href;

一旦找到 A 节点并设置图像源，您还应该break 退出循环。