How to add muitple same ID with Javascript on click event for multiple buttons with same class

Question

I'm new with JQuery. I'm using the Silverstripe PHP. I've managed to get the on click event with multiple divs with the same classes but if I want have different image in the second button with same class and from the same ID. What is the solution for this problem?

I'm aware that it has to be different IDs for it to work but the each button as loop function so it has to be the same 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>

main.css:

.modal {
   display: none;
   position: fixed;
   z-index:9999;
   padding-top:60px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
}
.modal-content {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
}
.modal-content {
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
}

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";
      }
    }

The first button i clicked on is working fine when pops up with the first image but when i clicked on the second button, it works fine but pops up the same first ID with the first image. It should be showing the second ID with the second image.

What's the right way to get this working? am i doing it all wrong?

Answer 1

• If you decided to use jquery so use jquery don't combine pure javascript with jquery

• Id should be unique so even if its from loop you can add id="myModal+' i '+" to add a number to the id .. if the loop in php use id="myModal.' i '." id="myModal.' i '."

• The problem is you define the myModal by id and each time will catch the same/first modal .. you need to refer the modal to the button you clicking on

---

$(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();
   });
});

---

 $(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(); }); });

 .modal { display: none; position: fixed; z-index:9999; padding-top:60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; background : #fff; } .modal-content { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="PosterButton"> <button class="posterBtn button" id="myBtn" value="$ClassPosterID"> <i class="fas fa-image"></i> View poster 1 </button> </div> <div class="myModal modal" id="myModal-1"> <div class="modal-content"> <span class="close">&times;</span> <div>Poster 1</div> <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 2 </button> </div> <div class="myModal modal" id="myModal-2"> <div class="modal-content"> <span class="close">&times;</span> <div>Poster 2</div> <img src="image-2.jpg" class="modal-content" /> </div> </div>

Answer 2

First of all an ID should be unique on the page.

As for the modals, the easiest way if you have the trigger and modal one after the other is by using next() that will get the immediately following sibling.

To know the exact button that has been clicked (received the event action) we will use this . In pseudo-code it will be, when we click on this button find the next element and show it.

I'v made an working example below based on your code:

https://jsfiddle.net/ahentea/8vjten5L/1/

Answer 3

由于您使用的是 JQuery，您可以轻松创建一个选择，该选择将指向您的第二个 PosterButton，而无需处理 id。