多次使用JavaScript脚本

我相信以前没有人问过这个问题。如果有，我道歉，因为我找不到它

我有一个以图片为按钮的HTML表格：

<td>
  <button class="trigger">
    <img src="D:\Elly Research\ CO2858\Presentation\Calypso_map.jpg">
  </button>
</td>

<div class="modal">
  <div class="modal-content">
    <span class="close-button">&times; </span>
    <img src="D:\Elly Research\CO2858\Presentation\Calypso_map.jpg">
    <script src="D:\Elly Research\CO2858\Presentation\modal.js"></script>
  </div>
</div>

如果我复制第一张图片的格式，并将其用于同一表格和同一页面中的第二张图片，它将停止工作

JavaScript是否不像CSS那样工作，我可以使用多个ID由一个CSS值控制

---

这是我第一次将JavaScript与HTML和CSS结合使用。

当您执行

document.querySelector（“.modal”）

时，您选择的是第一个具有类“modal”的节点。在您的情况下，它将是包含第一张图片的div。之后，您将只在第一张图片中添加

'click'

事件

您可以使用

querySelectorAll

，它返回所有匹配节点的列表，并通过所有节点循环添加

“单击”

事件侦听器，如下所示：

const modals = document.querySelector(".modal");

modals.forEach(modal => {
    modal.addEventListener('click', toggleModal)
});

---

执行

document.querySelector（“.modal”）

操作时，您选择的是第一个具有类“modal”的节点。在您的情况下，它将是包含第一张图片的div。之后，您将只在第一张图片中添加

'click'

事件

您可以使用

querySelectorAll

，它返回所有匹配节点的列表，并通过所有节点循环添加

“单击”

事件侦听器，如下所示：

const modals = document.querySelector(".modal");

modals.forEach(modal => {
    modal.addEventListener('click', toggleModal)
});

---

您可以多次使用js。检查图像的src。

---

这里已经讨论过了-。

您可以多次使用js。检查图像的src。

---

这里已经讨论过了-。

如果它是一个小型应用程序，一个简单的解决方案可能是创建一个包含其细节的图像对象，如下所示：

//在这里，可以为对象添加所需的任意多个属性
图像=[{
src:“D:\Elly Research\CO2858\Presentation\Calypso\u map.jpg”
},
{
src:“D:\Elly Research\CO2858\Presentation\Calypso\u map\u alternative.jpg”
}]

然后，您可以对其进行迭代以生成表，或者简单地使用一些ID引用创建表，如

，因此您可以使用以下代码在事件对象数组索引中访问它们：

var id = event.target.id

因此，要在模态内部生成img元素，您将有如下内容：

功能切换模式（事件）{
var id=event.target.id；
var div=document.getElementsByClassName（'modal-content'）[0]；
div.innerHTML+=''；
modal.classList.toggle（“显示模态”）；
}

但请确保在img元素已经存在时销毁它：

var child = div.querySelector("img");
if(child != null){
    div.removeChild(child);
}

---

希望它能帮助你！！祝你学习顺利

如果它是一个小型应用程序，一个简单的解决方案可能是创建一个包含其细节的图像对象，如下所示：

//在这里，可以为对象添加所需的任意多个属性
图像=[{
src:“D:\Elly Research\CO2858\Presentation\Calypso\u map.jpg”
},
{
src:“D:\Elly Research\CO2858\Presentation\Calypso\u map\u alternative.jpg”
}]

然后，您可以对其进行迭代以生成表，或者简单地使用一些ID引用创建表，如

，因此您可以使用以下代码在事件对象数组索引中访问它们：

var id = event.target.id

因此，要在模态内部生成img元素，您将有如下内容：

功能切换模式（事件）{
var id=event.target.id；
var div=document.getElementsByClassName（'modal-content'）[0]；
div.innerHTML+=''；
modal.classList.toggle（“显示模态”）；
}

但请确保在img元素已经存在时销毁它：

var child = div.querySelector("img");
if(child != null){
    div.removeChild(child);
}

---

希望它能帮助你！！祝你学习顺利

我不知道你到底想问什么。根据我的假设，这里有一个小片段。希望对你有帮助

var modal=document.getElementById（“modal”）
window.addEventListener（“单击”，windowOnClick）；
document.querySelector（“关闭按钮”）.addEventListener（“单击”，切换模式）
函数showImage（事件）{
toggleModal（）
modal.getElementsByTagName（“img”）[0].src=event.srcElement.src
}
函数windowOnClick（事件）{
if（event.srcElement==模态）{
toggleModal（）
}
}
函数toggleModal（）{
modal.classList.toggle（“显示模态”）
}

td>img{
宽度：100px；
高度：自动；
}
.莫代尔{
显示：无；
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
z指数=10；
}
.显示模态{
显示：块！重要；
}
.模态内容{
宽度：60%；
高度：自动；
保证金：0自动；
}
.关闭按钮{
颜色：白色；
光标：指针；
}
#观众{
宽度：100%；
高度：自动；
}

&时代；

我不知道你到底想问什么。根据我的假设，这里有一个小片段。希望对你有帮助

var modal=document.getElementById（“modal”）
window.addEventListener（“单击”，windowOnClick）；
document.querySelector（“关闭按钮”）.addEventListener（“单击”，切换模式）
函数showImage（事件）{
toggleModal（）
modal.getElementsByTagName（“img”）[0].src=event.srcElement.src
}
函数windowOnClick（事件）{
if（event.srcElement==模态）{
toggleModal（）
}
}
函数toggleModal（）{
modal.classList.toggle（“显示模态”）
}

td>img{
宽度：100px；
高度：自动；
}
.莫代尔{
显示：无；
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
z指数=10；
}
.显示模态{
显示：块！重要；
}
.模态内容{
宽度：60%；
高度：自动；
保证金：0自动；
}
.关闭按钮{
颜色：白色；
光标：指针；
}
#观众{
宽度：100%；
高度：自动；
}