javascript 如何为多个模态编码，其中一些模态是具有不同数量幻灯片的旋转木马

m4pnthwp 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(138)

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

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

个字符

JavaScript

来源：https://stackoverflow.com/questions/47032498/how-to-code-for-multiple-modals-where-some-of-them-are-carousels-with-different

2条答案

按热度按时间

kmb7vmvb1#

当你做这一行的时候

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

字符串
你计算了所有类名为“mySlides”的元素，这是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);
}

型

赞(0）回复(0）举报 2023-08-02

cwdobuhd2#

你也可以选择使用PipesJS + Modala

<carousel delay="5000" file-order="pic1.png;pic2.gif;pic3.jpg" boxes="4" interval="1" id="carousel-here" insert="carousel-here"></carousel>

字符串
是的，这将创建一个3张图片的旋转木马，第一张在最后重复，每“delay='n'”毫秒它将自动移动。如果你不想让它自动移动，那很快就会完成。
点击这里：
PipesJS + Modala
您可以看到它在g0d.me - pipes下工作

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 如何为多个模态编码，其中一些模态是具有不同数量幻灯片的旋转木马

2条答案

相关问题

热门标签

最新问答