more than one modal in one page where some of the modals are carousels

Question

I have a page with several buttons, when each button is clicked a different modal pops up. Some of the modals are carousels, the code I have works but for only one of the carousels, when I have more than one I get extra empty slides on all the carousels. So I'm guessing my code is counting all the slides from all the carousels together. Im trying to have write something where it says if this modal is clicked then get the slides from the clicked modal only but Im struggling with that.

These are the bits of relevant code:

 <button class="button" data-modal="#modalOne"><img id="myImg" src=""></button> <button class="button" data-modal="#modalB"><img id="myImg" src=""></button> <button class="button" data-modal="#modalC"><img id="myImg" src=""></button> <!-- The Modal --> <div id="modalA" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <div class= "mySlides"> <img class="gif" src="" width="100" height="100" > <h4>Title</h4> <p> content </p> </div> <div class="mySlides"> <h4 Title</h4> <p> content </p> </div> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div> </div> </div> <!-- The Modal B --> <div id="modalB" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <div class="mySlides"> <img class="gif" src="" width="100" height="100" > <h4></h4> <p></p> </div> </div> </div> <!-- The Modal C --> <div id="modalC" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <div class="mySlides"> <img class="gif" src="" width="100" height="100" > <h4></h4> <p></p> <div class="mySlides"> <h4></h4> <p></p> </div> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div> </div> </div> 

  <script> //Carousel var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { /*dots[i].className = dots[i].className.replace(" w3-white", "");*/ } x[slideIndex-1].style.display = "block"; /*dots[slideIndex-1].className += " w3-white";*/ } </script> <script> //Display corresponding modal of letter that is clicked $(".button").on("click", function() { var modal = $(this).data("modal"); $(modal).show(); document.body.classList.add("modal-open"); }); //Close modal when "x" is clicked or when area outside modal is clicked $(".modal").on("click", function(e) { var className = e.target.className; if(className === "modal" || className === "close"){ $(this).closest(".modal").hide(); document.body.classList.remove("modal-open"); } }); </script> 

Answer 1

看起来您的按钮上的结束标记没有正确的“ <”。