Question

我创建了一个基于w3schools的滑块，并希望在单击时以模态形式打开每个幻灯片。但是，只有第一张幻灯片是可单击的，其余幻灯片无法正常工作。

我试图将多个ID传递给getdocumentbyid函数，该函数不起作用。

这是de html / php：

<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="<?php echo $imgcount1;?>" id="myImg" class="opace">
    <div id="myModal" class="modal">
    <span class="close">&times;</span>
        <img class="modal-content" id="img01">
    </div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="<?php echo $imgcount2;?>" id="myImg" class="opace">
    <div id="myModal" class="modal">
    <span class="close">&times;</span>
        <img class="modal-content" id="img01">
    </div>
</div>

脚本：

// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

理想的情况是使每个图像都可点击并以模态显示

图像的模态javascript无法用于第二，第三等图像

0 个答案: