点击单张图片时仅修改被点击图片而不影响其他同class图片如何实现？

你要实现的效果参考图如下：

你可以通过获取当前触发点击事件的DOM节点来实现仅修改被点击图片的需求，不会影响其他同class的图片，具体实现方式如下：

原生JavaScript实现 #

基础实现（所有图片点击替换为同一张指定图） #

• 先选中所有同class的图片节点批量绑定点击事件
• 事件触发时直接操作当前触发事件的节点修改src属性即可

示例代码：

// 替换为你实际使用的图片class名
const imageList = document.querySelectorAll('.display-image');
// 替换为你要切换的目标图片地址
const replaceImagePath = '你的指定替换图片地址';

imageList.forEach(imageItem => {
  imageItem.addEventListener('click', function() {
    // 这里的this直接指向当前被点击的图片，不会操作其他元素
    this.src = replaceImagePath;
  })
})

进阶实现（不同图片点击替换为不同的指定图） #

如果需要每张图片对应不同的替换图，可以通过自定义属性存替换地址：
HTML部分示例：

<img class="display-image" src="原图1地址" data-replace="替换图1地址" alt="展示图1">
<img class="display-image" src="原图2地址" data-replace="替换图2地址" alt="展示图2">
<img class="display-image" src="原图3地址" data-replace="替换图3地址" alt="展示图3">

对应JS调整为：

const imageList = document.querySelectorAll('.display-image');
imageList.forEach(imageItem => {
  imageItem.addEventListener('click', function() {
    this.src = this.dataset.replace;
    // 如果需要替换后不可再次点击可以追加下面代码
    // this.style.pointerEvents = 'none';
  })
})

jQuery实现（适配已引入jQuery的项目） #

代码更简洁，逻辑和原生一致：

$('.display-image').click(function() {
  $(this).attr('src', '替换图片地址');
  // 读取自定义属性的写法为 $(this).attr('src', $(this).data('replace'));
})

核心注意点 #

不要在点击事件中直接通过class选择器批量修改src，只要操作当前触发事件的this指向的节点即可，天然不会影响其他同class元素。

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