Javascript 用类而不是id显示fancybox

我刚开始学习Javascript。我希望你能帮助我

如果有人点击带有class属性的链接，我想使用fancybox。我也用id完成了这项工作。使用id属性，代码工作得非常好。但是如果我用类属性来保存它，它就不起作用了(

开放模态
&时代；
模态中的一些文本

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

这段代码工作得很好。但是为什么不只使用类属性呢？这段代码与上面的代码具有相同的元素。只更改了下面几行代码

<button class="myBtnNew">Open Modal New</button>

var myBtnNew = document.getElementsByClassName("myBtnNew");

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

打开模式新建
var myBtnNew=document.getElementsByClassName（“myBtnNew”）；
myBtnNew.onclick=函数（）{
modal.style.display=“块”；
}

---

感谢您的帮助…

getElementsBy正如它所说的那样，重新返回多个元素，即一个列表。因此MyBtnew是一个元素列表，而该列表没有onclick。因此只需添加[0]，就像您对span所做的那样：

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

---

document.getElementsByClassName

返回一个对象数组，而不仅仅是一个对象。使用以下方法：

var myBtns = document.getElementsByClassName("myBtnNew");

myBtns[0].onclick = function() {
    modal.style.display = "block";
}

var myBtns = document.getElementsByClassName("myBtnNew");

myBtns[0].onclick = function() {
    modal.style.display = "block";
}