JS动态设置a标签href异常：点击不同图片跳转链接相同如何解决？

问题原因 #

• 你的grandeImage变量是在页面初始化阶段就赋值的，仅会保存页面加载完成时#full元素的src属性值，后续你切换大图的src时，这个变量的值不会自动同步更新，所以每次点击判断时用的都是初始的assets/img/johndoe.png，只会命中第一个判断逻辑，统一跳转到维基百科。
• 这个问题和事件冒泡无关，所以调用stopPropagation()不会有任何效果。

修复方案 #

把获取src属性值的逻辑移到点击事件的回调函数内部，每次点击时都获取当前大图的最新src值再做判断即可，修改后的代码如下：

let redirection = document.getElementById('redirection');

redirection.addEventListener('click', function() {
  // 每次点击时读取最新的大图地址
  let grandeImage = document.getElementById('full').getAttribute('src');
  if (grandeImage == "assets/img/johndoe.png") {
    redirection.setAttribute('href', 'https://www.wikipedia.org');
  }
  if (grandeImage == "assets/img/voyage.png") {
    redirection.setAttribute('href', 'https://www.google.com');
  }
});

内容的提问来源于stack exchange，提问作者kim le