如何使用Javascript为具有相同类的多个按钮添加多个相同ID的单击事件

我是JQuery新手。我正在使用Silverstripe PHP。我已经成功地获得了具有相同类的多个div的点击事件，但是如果我想在第二个按钮中具有相同类和相同ID的不同图像，该问题的解决方案是什么

我知道它必须是不同的ID才能工作，但是每个按钮都是循环函数，所以它必须是相同的ID

file.ss：

<div class="PosterButton">
   <button class="posterBtn button" id="myBtn" value="$ClassPosterID">
       <i class="fas fa-image"></i> View poster
   </button>
</div>
<div class="myModal modal" id="myModal">
   <div class="modal-content">
       <span class="close">&times;</span>
       <img src="image-1.jpg" class="modal-content" />
   </div>
</div>

<div class="PosterButton">
   <button class="posterBtn button" id="myBtn" value="$ClassPosterID">
       <i class="fas fa-image"></i> View poster
   </button>
</div>
<div class="myModal modal" id="myModal">
   <div class="modal-content">
       <span class="close">&times;</span>
       <img src="image-2.jpg" class="modal-content" />
   </div>
</div>

jQuery.js：

    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0];
    $(document).ready(function() {
        $('.posterBtn').click(function(event) {
        event.preventDefault();
            modal.style.display = "block";
            });
    });
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

我单击的第一个按钮在与第一个图像一起弹出时工作正常，但当我单击第二个按钮时，它工作正常，但与第一个图像一起弹出相同的第一个ID。它应该显示第二个ID和第二个图像

---

什么是让它工作的正确方法？我做错了吗？

因为您使用的是JQuery，所以可以轻松创建指向第二个PosterButton的select，而无需处理ID。

• 如果您决定使用

  jquery

  ，那么请使用jquery，不要将纯javascript与jquery结合使用
• Id应该是唯一的，因此即使它来自循环，您也可以添加

  Id=“myModal+'i'+”

  以向Id添加一个数字。。如果php中的循环使用

  id=“myModal.”i.“

• 问题是您通过id定义了

  myModal

  ，每次都会捕获相同的/第一个模态。。您需要将模态引用到您单击的按钮

---

---

$（文档）.ready（函数（）{
$（'.posterBtn'）。单击（函数（事件）{
//event.preventDefault（）；
var GetModal=$（this）.closest（'.PosterButton'）.next（'.modal'）；//获取下一个模态
GetModal.show（）；//显示下一个模态
});
$（'.modal span.close'）。在（'click'，function（）{//modal close span
$（'.modal'）.hide（）；//隐藏模态
});
//关闭模式
//当选择模式时，单击关闭模式
$（'.modal'）。在（'click'，function（）上{
$（this.hide（）；
});
//防止在单击模式内容div时关闭模式
$（'.modal content'）。在（'click'，函数（e）上{
e、 停止传播（）；
});
});
.modal{
显示：无；
位置：固定；
z指数：9999；
填充顶部：60px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
背景：#fff；
}
.模态内容{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}

浏览海报1
&时代；
海报1
浏览海报2
&时代；
海报2
首先，ID在页面上应该是唯一的

至于模态，如果触发器和模态一个接一个地出现，最简单的方法是使用
next（）
，这将得到紧跟其后的同级

要知道已单击的确切按钮（接收到事件操作），我们将使用
this
。
在伪代码中，当我们单击
此
按钮上的
时，找到
下一个
元素并
显示它

根据您的代码，我在下面制作了一个工作示例：

哦，太棒了，非常感谢您的解释，我已经尝试了您的代码，它按照我的期望工作。我花了很长时间才弄明白，但你却让这件事变得如此简单。谢谢。@SUTHERLANDesign您也可以阅读我的更新答案。我添加了一个部件，在单击它时关闭模态，并阻止单击模态内容。。祝你度过愉快的一天：-）哦，我刚开始评论时没有看到额外的代码。我已经测试了该代码，但它不起作用，因为它可以很好地工作，没有额外的代码来关闭模式。晚上好谢谢你的回答，当我尝试它的时候，它似乎对我不起作用，即使你已经做了一个很有效的例子。它需要有。Mohamed Yousef的答案对我的网站很有用。下次我会记住的。只需将“.posterBtn”替换为“.PosterButton”即可。我很乐意为您提供帮助：D
    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0];
    $(document).ready(function() {
        $('.posterBtn').click(function(event) {
        event.preventDefault();
            modal.style.display = "block";
            });
    });
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }


$(document).ready(function() {
   $('.posterBtn').click(function(event) {
       //event.preventDefault();
       var GetModal = $(this).closest('.PosterButton').next('.modal'); // get the next modal
       GetModal.show();  // show the next modal
   });
   $('.modal span.close').on('click', function(){  // modal close span
      $('.modal').hide(); // hide modal
   });

   // To close modal
   // when modal click close the modal
   $('.modal').on('click' , function(){
     $(this).hide();
   });
   // prevent the modal to close when clicking on the modal content div
   $('.modal-content').on('click' , function(e){
    e.stopPropagation();
   });
});