[英]Onclick in onclick function
I have a basic problem with showing modal.我有一个显示模态的基本问题。 Everything is working ok, but only for second click.一切正常,但仅适用于第二次点击。 I am sure, I have some mistake in js code.我敢肯定,我在 js 代码中有一些错误。 Can you help me please?你能帮我吗?
HTML code: HTML代码:
<div class="flex flex-col lg:flex-row justify-center px-3 lg:px-0">
<div class="pb-3 lg:pb-0 lg:p-5 cursor-pointer">
<img onclick="showImage('planek1')" id="planek1" src="assets/imgs/planek1.jpg" alt="">
</div>
<div class="cursor-pointer lg:p-5">
<img onclick="showImage('planek2')" id="planek2" src="assets/imgs/planek2.jpg" alt="">
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
Javascript code: Javascript代码:
function showImage(id) {
const modal = document.getElementById("myModal");
const img = document.getElementById(id);
const modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
}
Try removing onclick="showImage('planek2')"
, give a class="triggers-modal"
to your elements, and write this JavaScript:尝试删除onclick="showImage('planek2')"
,给你的元素一个class="triggers-modal"
,然后写这个 JavaScript:
const modalImg = document.getElementById("img01");
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
Array.from(document.getElementsByClassName('triggers-modal')).forEach(element => {
element.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
});
This code defines the modal behavior for every element that has the triggers-modal
class name instead of the onclick
event which is inappropriate.这段代码为每个具有triggers-modal
类名而不是不合适的onclick
事件的元素定义了模态行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.