HTML修改图片src后getAttribute获取初始值问题求助

核心问题原因 #

你用getAttribute("src")只能拿到HTML标签上写的初始属性值，因为动态修改src后，更新的是DOM对象的属性（property），而非HTML上的特性（attribute），二者不会自动同步。直接读取img元素.src才能拿到当前实际显示的图片地址，不过更靠谱的方式是用自定义属性或类来标记选中状态，不用依赖src字符串判断。

原生JS解决方案 #

先给HTML结构做简单调整，给每行图片加统一容器类，给图片加自定义属性存原始和选中状态的地址：

<!-- 每行图片放在统一容器里 -->
<div class="img-row">
  <img src="normal1.png" class="row-img" data-normal="normal1.png" data-selected="selected1.png">
  <img src="normal2.png" class="row-img" data-normal="normal2.png" data-selected="selected2.png">
</div>
<div class="img-row">
  <img src="normal3.png" class="row-img" data-normal="normal3.png" data-selected="selected3.png">
</div>

然后写JS逻辑：

// 给所有图片绑定点击事件
document.querySelectorAll('.row-img').forEach(img => {
  img.addEventListener('click', function() {
    // 找到当前图片所在的行容器
    const currentRow = this.closest('.img-row');
    // 遍历该行所有图片，取消选中状态
    currentRow.querySelectorAll('.row-img').forEach(otherImg => {
      otherImg.src = otherImg.dataset.normal;
    });
    // 把当前图片设为选中状态
    this.src = this.dataset.selected;
  });
});

jQuery解决方案 #

如果习惯用jQuery，逻辑类似：

$('.row-img').on('click', function() {
  const $currentRow = $(this).closest('.img-row');
  // 取消该行其他图片的选中状态
  $currentRow.find('.row-img').not(this).attr('src', function() {
    return $(this).data('normal');
  });
  // 设置当前图片为选中
  $(this).attr('src', $(this).data('selected'));
});

更优的状态管理方式（推荐） #

不用靠src判断选中状态，而是用CSS类标记，语义更清晰：

document.querySelectorAll('.row-img').forEach(img => {
  img.addEventListener('click', function() {
    const currentRow = this.closest('.img-row');
    // 移除该行所有图片的选中类并恢复原图
    currentRow.querySelectorAll('.row-img.is-selected').forEach(selectedImg => {
      selectedImg.classList.remove('is-selected');
      selectedImg.src = selectedImg.dataset.normal;
    });
    // 给当前图片添加选中类并切换到选中图
    this.classList.add('is-selected');
    this.src = this.dataset.selected;
  });
});

这样后续维护时，不用再纠结src里的字符串，直接通过类就能判断状态，出错概率更低。

内容的提问来源于stack exchange，提问作者Wallace B. McClure