点击指定图片后获取同ID容器内另一图片src的实现方法

没问题，这需求很好实现，而且完全不需要额外添加类或者div元素，我给你两种常用的实现方式：

原生JavaScript实现 #

首先假设你的HTML结构是这样的（完全符合需求，无额外冗余元素）：

<div id="mywrap">
  <img class="getimage" src="image-1.jpg" alt="触发点击的图片">
  <img src="image-2.jpg" alt="同容器图片1">
  <img src="image-3.jpg" alt="同容器图片2">
</div>

然后用原生JS编写逻辑：

// 给所有class为getimage的图片绑定点击事件
document.querySelectorAll('.getimage').forEach(triggerImg => {
  triggerImg.addEventListener('click', function() {
    // 从当前点击的图片向上查找，找到最近的#mywrap容器
    const parentWrap = this.closest('#mywrap');
    
    // 获取容器内所有图片的src属性值
    const allImageSrcs = Array.from(parentWrap.querySelectorAll('img')).map(img => img.src);
    
    // 这里可以根据你的需求处理获取到的src，比如打印到控制台或者用于其他操作
    console.log('同容器内的图片src:', allImageSrcs);
    
    // 如果只需要容器内**除触发点击的图片外**的src，替换成下面这行
    // const otherImageSrcs = Array.from(parentWrap.querySelectorAll('img:not(.getimage)')).map(img => img.src);
  });
});

代码解释 #

• this.closest('#mywrap')：这是核心逻辑，它会从当前点击的图片开始向上遍历DOM树，精准找到最近的#mywrap容器，完美匹配“同一容器”的要求，完全不需要依赖额外标记。
• Array.from(...)：把querySelectorAll返回的伪数组转换成真实数组，方便用map方法批量提取src。

jQuery实现（如果项目已引入jQuery） #

如果你的项目里已经在用jQuery，代码会更简洁：

$('.getimage').on('click', function() {
  // 找到当前元素所在的#mywrap容器
  const $parentWrap = $(this).closest('#mywrap');
  
  // 获取容器内所有图片的src
  const allImageSrcs = $parentWrap.find('img').map(function() {
    return $(this).attr('src');
  }).get();
  
  console.log('同容器内的图片src:', allImageSrcs);
});

两种方式都严格符合你的要求，不会添加任何额外的类或div元素，你可以根据项目环境选择合适的实现~

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