Img模态只打开第一个img

时间:2017-10-28 18:54:24

标签: javascript php html css

我正在尝试使用下面的页面列出多个图像,而当您单击图像时,它会以模态打开。

它适用于第一张图片而不是其他图片,我假设它是一个JS问题,我尝试设置一个空的var然后设置它来获取元素id(每个img都是相同的)但是只有第一部作品。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 

<p style="color:red">This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
 

1 个答案:

答案 0 :(得分:2)

您的代码包含不同元素的相同 $(document).ready(function(){ $('.performance_menu_holder').hide() $('.performance_menu_trigger').click(function(){ $('.performance_menu_holder').animate({ "opacity" : "show", bottom: "100" }, 500); $('.performance_menu_trigger').addClass('performance_menu_trigger_close'); }); $('.performance_menu_trigger_close').click(function(){ $('.performance_menu_holder').animate({ "opacity" : "show", top: "100" }, 500); $('.performance_menu_trigger').removeClass('performance_menu_trigger_close'); }); }); 属性,但 id必须是唯一的。

id属性指定HTML元素的唯一标识符,以便您可以通过JS或CSS对其进行操作。如果您对不同的元素使用相同的id,则只能获得页面上的第一个元素。

如果您要向多个元素添加事件监听器,请向id添加class

<img>

然后为每个具有类echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200" class="modal-img"> 的元素添加事件侦听器。