点击触发多图展示问题求助：实现单次点击显示全部三张图片

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是HTML中重复使用了同一个ID——根据HTML规范，ID必须是页面唯一的，所以你用同一个ID绑定多张图片的方式无法实现批量显示。咱们调整代码结构，用class来做分组，就能轻松实现点击按钮显示对应组的所有图片啦。

问题分析 #

你的原代码里，多张图片共用了divId1、divId2这样的ID，这会导致jQuery的$('#'+hello)只能选中第一个匹配的元素，所以每次点击只能显示单张图片。同时，第二个分组里的部分图片data-id写错了（写成了divId1），这也会影响显示逻辑。

修改后的完整代码 #

HTML部分 #

首先修正ID重复的问题，用class来标记图片分组，同时修正错误的data-id：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='#' class="exposition" data-group="group1">show</a>
<a href='#' class="exposition" data-group="group2">show 2</a>
<div class="photos-group">
  <div class="photos-ind"><img class="photos-evenements group1" src="http://follebeton.com/img/Performances%20OK.jpg"/></div>
  <div class="photos-ind"><img class="photos-evenements group1" src="http://follebeton.com/img/333_3.png"/></div>
  <div class="photos-ind"><img class="photos-evenements group1" src="http://follebeton.com/img/333_1.png"/></div>
</div>
<div class="photos-group">
  <div class="photos-ind"><img class="photos-evenements group2" src="http://follebeton.com/img/Performances%20OK.jpg"/></div>
  <div class="photos-ind"><img class="photos-evenements group2" src="http://follebeton.com/img/333_3.png"/></div>
  <div class="photos-ind"><img class="photos-evenements group2" src="http://follebeton.com/img/333_1.png"/></div>
</div>

CSS部分 #

保持原有样式不变，只负责隐藏图片：

.photos-evenements{
  display:none;
  max-width: 100%;
  max-height: 90vh;
}

JavaScript部分 #

修改选择逻辑，通过class选择器批量选中同组图片：

$(document).ready(function(){
  $(".exposition").on('click',function(e){
    e.preventDefault(); // 阻止a标签默认跳转行为
    var groupName = $(this).attr('data-group');
    $('.photos-evenements').hide(); // 隐藏所有图片
    $('.' + groupName).show(); // 显示对应分组的所有图片
  });
});

关键改动说明 #

• 替换ID为Class分组：把原来重复的ID（divId1/divId2）换成class（group1/group2），这样可以批量选中同组的所有图片
• 修正按钮属性：把按钮的data-id改成data-group，更清晰地表示它对应图片分组
• 阻止默认跳转：添加e.preventDefault()避免点击a标签时页面跳转到顶部
• 批量选择图片：用$('.' + groupName)代替原来的$('#'+hello)，这样就能选中所有同组的图片并显示

这样修改后，点击「show」按钮就会一次性显示group1的三张图片，点击「show 2」则显示group2的三张图片啦！

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