Question

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

这些是相关代码：

function CheckType(val, expectedType) {
  return (typeof val == expectedType);
}


console.log(CheckType(10, "number")); // false
console.log(CheckType(true, "boolean")); // true
console.log(CheckType("Hello World", "string")); // true;

<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

当你这样做时

var x = document.getElementsByClassName("mySlides");

您计算所有类别为＆＃34; mySlides＆＃34;的元素，这是HTML文档中的所有幻灯片。

在按钮单击例程中添加代码以计算相应模式中的幻灯片数量：

在javascript顶部添加：

var modal = "modalA";
showDivs(slideIndex, modal);

将按钮更改为：

$(".button").on("click", function() {
   modal = $(this).data("modal").text();
   $("#" + modal).show();
   document.body.classList.add("modal-open");  
});

修改showDivs函数以包含新变量：

  function showDivs(n, modal) {
  var i;
  var x = document.getElementById(modal).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";*/
}

最后，将按钮的数据模态属性更改为：

<button class="button" data-modal="modalA">
<button class="button" data-modal="modalB">
<button class="button" data-modal="modalC">

您还需要更新这些行：

function plusDivs(n) {
 showDivs(slideIndex += n, modal); 
}

function currentDiv(n) {
  showDivs(slideIndex = n, modal);
}

如何编码多个模态，其中一些模式是具有不同幻灯片数量的轮播

1 个答案: