javascript - 一页中有多个模态，其中某些模态是轮播

我有一个页面有几个按钮，当每个按钮被点击时，一个不同的模式弹出。有些模式是carousels，我有代码，但只有一个carousels，当我有多个，我得到额外的空幻灯片上所有的carousels。所以我猜我的代码是把所有旋转木马上的幻灯片数在一起。我试图写一些东西，它说，如果这个模式是点击，然后从点击的模式只得到幻灯片，但我与之斗争。
这些是相关代码的位：

<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>

最佳答案

看来你没有正确的“