一个页面中有多个模态，其中一些模态是轮播

Question

我有一个带有几个按钮的页面，当点击每个按钮时会弹出一个不同的模态。一些模态是旋转木马，我的代码是有效的，但只有一个旋转木马，当我有一个以上时，我在所有旋转木马上都得到额外的空幻灯片。所以我猜我的代码正在计算所有旋转木马的所有幻灯片。我试着写一些东西，它说如果点击这个模态，然后从点击模式获得幻灯片，但我正在努力。

这些是相关代码：

<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

看起来你没有正确的“＆lt;”用于按钮上的结束标记。