gpt4 book ai didi

javascript - 模态仅显示第一张图片(我应该如何将代码从 id 更改为 class?)

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:25:14 24 4
gpt4 key购买 nike

我有一本期刊,其中每篇文章显示多张图片。它们是 self 延续和制造的。我不确定他们的 ID 是什么。我最近添加了一个显示模态图像的代码,但是该代码只有一个 ID,因此只有第一张图像显示为模态图像。其余均不显示。

请查看 JavaScript 代码和 html。让我知道,如何改变它。 谢谢

JS代码

// 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");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// 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";
}

HTML 代码

<div class="imagewrap">

{** check if link is from galley attachments*}
{if strpos($secCont->getLink(), "/") == false}
{foreach from=$imageUrlArray key=fileName item=urlLink}
{if $fileName == $secCont->getLink()}

<img src="{$urlLink}" id="myImg" alt="{$secCont->getLabel()}" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">

<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>



<a style="font:4;"><a class="imagewrap" href="{$urlLink}"><strong>[Download figure]</strong></a>
{/if}
{/foreach}
{else}
<img src="{$secCont->getLink()}">

<a style="font:4;"><a class="imagewrap" href="{$secCont->getLink()}"><strong>[Download figure]</strong></a>


{/if}

</div>

最佳答案

好吧,我们不需要 ID。我们可以使用 document.querySelectorAll 来获取不同的图像。请看下面的代码。

// Get the modal
// and all the variable we need.
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

showImageInModal = function(e) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// get all the images using querySelector: we want all the direct descendants of div with class imagewrap.
//Loop them using Array's forEach. Since querySelector returns a nodelist which is array like, we can loop it with forEach. Use call to pass the nodelist as a reference.
var images = document.querySelectorAll("div.imagewrap > img");
Array.prototype.forEach.call(images, function(element){
element.addEventListener("click", showImageInModal, true); //attach the onclick handler to the image using the correct approach with addEventListener.
});

// 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.addEventListener("click", function(e) {
modal.style.display = "none";
}, true);
.modal{
position: absolute;
left: 10px;
top: 10px;
border: 1px solid black;
width: 300px;
display: none;
background-color: white;
}
<div class="imagewrap">
<!-- added # to the getLabel so you can see the difference, please remove when copied -->
<img src="{$urlLink}" alt="{$secCont->getLabel(1)}" width="300" height="200">
<img src="{$urlLink}" alt="{$secCont->getLabel(2)}" width="300" height="200">
<img src="{$urlLink}" alt="{$secCont->getLabel(3)}" width="300" height="200">
<img src="{$urlLink}" alt="{$secCont->getLabel(4)}" width="300" height="200">
<img src="{$urlLink}" alt="{$secCont->getLabel(5)}" width="300" height="200">
<img src="{$urlLink}" alt="{$secCont->getLabel(6)}" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close" >&times;</span>

<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">

<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>

</div>

关于javascript - 模态仅显示第一张图片(我应该如何将代码从 id 更改为 class?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46663892/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com