我正在尝试使用下面的页面列出多个图像,而当您单击图像时,它会以模态打开。
它适用于第一张图片而不是其他图片,我假设它是一个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>
答案 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">
的元素添加事件侦听器。