单击时显示多个图像

Question

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

$(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>

Answer 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 属性应该是唯一的，这就是为什么 # 只找到第一次出现的原因，这也是为什么你应该使用类而不是 [=13] =]

单击时显示多个图像

showing multiple images on click

html

javascript

jquery

image

show