Jquery 同一页上有多个情态动词

我试图在一个页面上触发多个模态，同时调出每个模态的正确内容。我确信这与区分ID或类有关，只是无法理解。谢谢你的帮助

下面是触发模式的代码，我只是对如何使每个链接都特定于此感到困惑。下面是JSFiddle链接

var modal = document.getElementById('myModal_1');

var btn = document.getElementById("modal_1");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}

模式2的内容

// Get the modal
var modal = document.getElementById('myModal_2');

// Get the button that opens the modal
var btn = document.getElementById("modal_2");

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

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

//获取模式
var modal=document.getElementById（'myModal_2'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“模态2”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

---

https://jsfiddle.net/o4vohxr4/

看看你的小提琴，问题是你正在覆盖你自己的变量

两个事件处理程序都使用

vars

modal

、

btn

和

span

。由于模式2的设置较晚，因此它的

modal

值用于两个按钮

另外，

document.getElementsByCassName（“close”）[0]

每次都将获得第一个

close

类元素，这就是为什么

X

在

模式2

上不起作用，因为两个事件处理程序都试图隐藏模式1

当变量名在同一范围内时，您需要使用唯一的变量名，并记住文档级命令，如

document.getElementsByClassName

将始终从顶部开始

此外，还可以指定

window.onclick

两次，第二次将覆盖第一次

下面是一个简短的编辑，以获得您想要的功能，但请考虑使用比我在这里使用的更好的变量命名

// Get the modal
var modal = document.getElementById('myModal_1');

// Get the button that opens the modal
var btn = document.getElementById("modal_1");

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

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

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



// Get the modal
var modal2 = document.getElementById('myModal_2');

// Get the button that opens the modal
var btn2 = document.getElementById("modal_2");

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

// When the user clicks the button, open the modal
btn2.onclick = function() {
  modal2.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal || event.target == modal2) {
    event.target.style.display = "none";
  }
}

//获取模式
var modal=document.getElementById（'myModal_1'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“模式1”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//获取模态
var modal2=document.getElementById（'myModal_2'）；
//获取打开模式对话框的按钮
var btn2=document.getElementById（“模态_2”）；
//获取关闭模态的元素
var span2=document.getElementsByClassName（“关闭”）[1]；
//当用户单击该按钮时，打开模式对话框
btn2.onclick=函数（）{
modal2.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span2.onclick=函数（）{
modal2.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
if（event.target==modal | | event.target==modal2）{
event.target.style.display=“无”；
}
}

JSFIDLE对我来说似乎很管用。什么是意外行为？模式1应打开“模式1”，模式2应打开“模式2”。每个链接都打开“模式2”。我更新了命名，使其更有意义。我在JSFIDLE中只看到一个模式<代码>#模式#种植(混合)。请检查您的JSFIDLE并更新。对不起，试试这把小提琴。同样，这里只有一个模态<代码>#模式2<代码>#模式1仅包含按钮。你是否期望模态1像模态一样工作？模态1是否应该打开模态2？谢谢。只是想把基本功能放下来。这帮了大忙，完全是法语！这可以被重构很多，你现在所有的东西都有两次，好的，只有两个模态，但是如果将来再出现4次，你会所有的东西都有6次吗？？没有男人，维持痛苦。有人打紧急电话！；）只需声明一个检查模态id的函数，然后显示正确的函数！