事件委托点击缩略图不显示主图像

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;

找到break节点并设置图像源后，您还应该A离开循环。

Answer 2

使用：

img.src = this.href;

应该使用：

img.src = target.href;