点击时显示多张图片答案

【问题标题】：showing multiple images on click点击时显示多张图片
【发布时间】：2020-07-19 19:41:10
【问题描述】：

嘿，我制作了这个脚本，以便在点击时显示一个简单的图像。我现在试图通过一键显示不同的图像，但我被卡住了...... 你能帮我找到一种方法来通过简单的点击显示来显示所有三个图像吗？谢谢！

$(document).ready(function(){
$(".exposition").on('click',function(){
   
   var hello = $(this).attr('data-id');
   $('.photos-evenements').hide();
   $('#'+hello).show();
});
});

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

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



<div class="exposition">
  <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId2"/></div>
  <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div>
  <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div>
</div>

【问题讨论】：

您可以点击答案旁边的“V”将其标记为正确答案。

标签： javascript html jquery image show

【解决方案1】：

当然，# 选择器只选择第一次出现的具有该 id 的元素，要查找具有该 id 的所有元素，只需将选择器更改为 [id=' + hello + ']'

这是最终代码：

$(document).ready(function(){
$(".exposition").on('click',function(){
   
   var hello = $(this).attr('data-id');
   $('.photos-evenements').hide();
   $('[id='+ hello + ']').show();
});
});

id 属性应该是唯一的，这就是为什么 # 只找到第一次出现，这也是为什么你应该使用类而不是 id

【讨论】：