- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我有一本期刊,其中每篇文章显示多张图片。它们是 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'">×</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" >×</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/
我有一个功能是转换 ADO Recordset 进入html: class function RecordsetToHtml(const rs: _Recordset): WideString; 该函
经过几天的研究和讨论,我想出了这种方法来收集访客的熵(你可以看到我的研究历史here) 当用户访问时,我运行此代码: $entropy=sha1(microtime().$pepper.$_SERVE
给定一个无序列表 List ,我需要查找是否存在 String与提供的字符串匹配。 所以,我循环 for (String k : keys) { if (Utils.keysM
我已经搜索过这个问题,但没有找到我正在寻找的答案。 基本上,我想将类构造函数包装在 try/except 子句中,以便它忽略构造函数内特定类型的错误(但无论如何都会记录并打印它们)。我发现做到这一点的
我有一组三个数字,我想将一组数字与另一组数字进行比较。即,第一组中的每个数字小于另一组中的至少一个数字。需要注意的是,第一组中的下一个数字必须小于第二组中的不同数字(即,{6,1,6} 对 {8,8,
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
首先介绍一下背景: 我正在开发一个带有 EJB 模块和应用程序客户端模块的企业应用程序 (ear)。我还使用 hibernate JPA 来实现持久性,并使用 swingx 来实现 GUI。这些是唯一
我正在尝试在我的上网本上运行 Eclipse 以便能够为 Android 进行开发。 您可能已经猜到了,Eclipse 非常慢,并且不容易有效地开发。 我正在使用 Linux Ubuntu 并且我还有
for row, instrument in enumerate(instruments): for col, value in enumerate(instrument):
return not a and not b ^ 我如何以更好的格式表达它 最佳答案 DeMorgan's Law , 也许? return not (a or b) 我认为在这一点上已经足够简单了
我正在尝试让 Font Awesome 图标看起来更 slim https://jsfiddle.net/cliffeee/7L6ehw9r/1/ . 我尝试使用“-webkit-text-strok
假设我有一个名为 vals 的数据框,如下所示: id…………日期…………min_date…… .........最大日期 1…………2016/01/01…………2017/01/01…………2018/
是否有更 Pythonic 的方式来做到这一点?: if self.name2info[name]['prereqs'] is None: se
我有一个函数可以将一些文本打印到它接收到的 ostream&。如果 ostream 以终端为目标,我想让它适应终端宽度,否则默认为某个值。 我现在做的是: 从 ostream 中获取一个 ofstre
这个问题在这里已经有了答案: Should a retrieval method return 'null' or throw an exception when it can't produce
我有这个 bc = 'off' if c.page == 'blog': bc = 'on' print(bc) 有没有更 Pythonic(和/或更短)的方式在 Python 中编写? 最佳
输入:一个包含 50,000 行的 CSV;每行包含 910 列值 0/1。 输出:运行我的 CNN 的数据框。 我编写了一个逐行读取 CSV 的代码。对于每一行,我将数据分成两部分,称为神经元(90
据我所知,with block 会在您退出 block 后自动调用 close(),并且它通常用于确保不会忘记关闭一个文件。 好像没有技术上的区别 with open(file, 'r+') as f
我有一个使用 Entity Framework V6.1.1 的 MVC 5 网站。 Entity Framework DbContext 类和模型最初都在网站项目中。这个项目有 3 个 DbCont
我是编程新手,在尝试通过将 tableView 和关联 View 的创建移动到单独的类并将委托(delegate)和数据源从 VC 移动到单独的类来精简我的 ViewController 时遇到了一些
我是一名优秀的程序员,十分优秀!