使用Javascript在for循环中的一个页面上的多个模态

Question

我正在尝试在单个页面中允许多个模态。html 设置是：

<div class="grid-item">
<img id="Img1" src="https://something"/>
</div>
<div id="myModal1" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption">Final Product: Folding Paduak Timepiece</div>
</div>
<div class="grid-item">
<img id="Img2" src="https://somethingelse"/>
</div>
<div id="myModal2" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img02">
<div id="caption">Angled shot of unhinged product</div>
</div>
<div class="grid-item">
<img id="Img3" src="https://somethingagain"/>
</div>
<div id="myModal3" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img03">
<div id="caption">Downwards view of unhinged product</div>
</div>

我设法通过重复比我应该重复的更多的代码来做到这一点。下面演示了这一点;这奏效了：

var modal1 = document.getElementById('myModal1');
var modal2 = document.getElementById('myModal2');
var modal3 = document.getElementById('myModal3');
var img1 = document.getElementById('Img1');
var img2 = document.getElementById('Img2');
var img3 = document.getElementById('Img3');
var modalImg1 = document.getElementById("img01");
var modalImg2 = document.getElementById("img02");
var modalImg3 = document.getElementById("img03");
var captionText1 = document.getElementById("caption1");
var captionText2 = document.getElementById("caption2");
var captionText3 = document.getElementById("caption3");
img1.onclick = function(){
modal[i].style.display = "block";
modalImg1.src = this.src;
captionText1.innerHTML = this.alt;
}
img2.onclick = function(){
modal2.style.display = "block";
modalImg2.src = this.src;
captionText2.innerHTML = this.alt;
}
img3.onclick = function(){
modal3.style.display = "block";
modalImg3.src = this.src;
captionText3.innerHTML = this.alt;
}
var span1 = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
var span3 = document.getElementsByClassName("close")[2];
span1.onclick = function() { 
modal1.style.display = "none";
}
span2.onclick = function() { 
modal2.style.display = "none";
}
span3.onclick = function() { 
modal3.style.display = "none";
}

为了简化这一点，我创建了一个 for 循环。下面演示了这一点;这不起作用：

var = modal[];
var = img[];
var = modalImg[];
var = captionText[];
var = span[];
for (var i = 1; i < 10; i++){
var modal[i] = document.getElementById("myModal"+ i.toString());
document.write(modal[i]);
var img[i] = document.getElementById("Img" + i.toString());
var modalImg[i] = document.getElementById("img0" + i.toString());
var captionText[i] = document.getElementById("caption");
img[i].onclick = function(){
modal[i].style.display = "block";
modalImg[i].src = this.src;
captionText[i].innerHTML = this.alt;
}
var span[i] = document.getElementsByClassName("close")[(i-1)];
span[i].onclick = function() { 
modal[i].style.display = "none";
}
}

任何帮助将不胜感激！我对 JavaScript 相当陌生，不太确定问题是什么。

Answer 1

根据您提供的完整小提琴，我可以看到您已经在使用jquery进行网格布局。使用 jquery，我可以给出一个更简单的解决方案 - 这是修改后的小提琴。

基本上，您可以将data-index属性添加到相关图像和模态，然后使用单个事件侦听器来管理模式打开。相关的 javascript 是：

/* jquery and data-property method */
$(function() {
$('body').on('click', '.modal-img', function(event) {
var $img = $(event.target);
var index = $img.data('index');
var $modal = $("#myModal" + index);
$modal.find('img').attr('src', $img.attr('src'));
$modal.find('#caption').text($img.attr('alt'));
$modal.css('display', 'block');
});
$('body').on('click', '.modal .close', function(event) {
var $modal = $(event.target).closest('.modal');
$modal.css('display', 'none');
});
});

这与将data-index添加到您的 html 中一样，就像在小提琴中一样，将起作用。

如果你想走得更远，有几个指示。Jquery可以用来相当容易地做一些事情，比如"查找当前img元素后面的.modal元素"等，消除了一起索引的需要。此外，如果您只引用单个模式而不是每个图像一个模式，您的代码仍然可以工作......每次显示模态时，您都会动态更新图像源和标题，因此单个模态将起作用。为此，只需从 html 中删除除一个模态之外的所有模态，并确保它被提供的代码中的$modal引用。

祝你好运！

Answer 2

Javascript 函数会随身携带它们的上下文，即使它们稍后执行也是如此。在for循环中，您可以定义两个函数(一个用于打开模态，一个用于关闭(。这些函数中的每一个都在访问循环变量i因为它是在函数外部定义的。如果修改了i(就像在循环期间一样(，则函数在执行时将访问新的修改值。

(这在 JavaScript 中既是一个大困难也是一个大机会！(

在这种情况下，您只需在 for 循环中定义一个新变量即可实现您想要的：

for (var i = 1; i < 10; i++){
var modal[i] = document.getElementById("myModal"+ i.toString());
document.write(modal[i]);
var img[i] = document.getElementById("Img" + i.toString());
var modalImg[i] = document.getElementById("img0" + i.toString());
var captionText[i] = document.getElementById("caption");
// before we define any functions, give the current index a new variable
var currentIndex = i;
// use the new variable in the functions to be executed later
img[i].onclick = function(){
modal[currentIndex].style.display = "block";
modalImg[currentIndex].src = this.src;
captionText[currentIndex].innerHTML = this.alt;
}
var span[i] = document.getElementsByClassName("close")[(i-1)];
span[i].onclick = function() { 
modal[currentIndex].style.display = "none";
}

}