Javascript 如何通过单击同一类的100个框中的任意一个打开模式？

这将在单击类为“today”的第一个元素时打开模态。我如何在单击类为“今天”的所有元素时将其打开

//获取模式和打开模式按钮
var modal=document.getElementById（“modal”）；
var btn=document.getElementsByClassName（“今天”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=function（）{modal.style.display=“block”}
1.

已更新 弄清楚这一点：100个框现在打开了模态，我希望我添加到模态中的按钮为单击的元素着色

不幸的是，我不知道如何做到这一点，除了考虑使用“这个”

代码现在如下所示：

// Get the modal and the open-modal-buttons
var modal = document.getElementById("modal");
var btns = document.getElementsByClassName("today");
var btnsLength = btns.length

for (var i = 0; i < btnsLength; i++) {
btns[i].onclick = function () {
modal.style.display = "block";
};
}

<!-- The Modal -->
<div id="modal">
<!-- Modal content -->
<div class="modal-content">
      <button id="color"></button>
</div>
</div>

//获取模式和打开模式按钮
var modal=document.getElementById（“modal”）；
var btns=document.getElementsByClassName（“今天”）；
var btnsLength=btns.length
对于（变量i=0；i

因为的返回值是一个HTML集合，您应该遍历它，并将

onclick

事件添加到它们的每个元素

为此，您应该首先通过选择器

document.getElementsByClassName（'today'）

获取所有元素的

class=“today”

，这样它将返回所有元素的HTML集合（类似数组的对象）。然后，您应该使用传统的循环或

var modal=document.getElementById（“modal”）；
var btns=document.getElementsByClassName（“今天”）；
var btnsLength=btns.length；
对于（变量i=0；i

。今天{
填充物：5px；
边框：1px实心；
}
#模态{
显示：无；
保证金：5px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
单击“今天”类的元素
var btn=document.getElementsByClassName（“今天”）[0]将仅返回第一个元素。您可以将它们全部删除
[0]
：

var btns=document.getElementsByClassName（“今天”）

如果它是一个列表，您可以使用for循环对其进行迭代：

for (var btn of btns) {
      btn.onclick = function() { modal.style.display = "block";};
    }

或使用
forEach
：

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

我认为您只为类为“today”的所有元素中的第一个元素定义了btn。行末尾的[0]定义了这一点：
var btn=document.getElementsByClassName（“今天”）[0]删除零应该可以回答您的问题。@GerritHalfmann谢谢您的回答。如果没有“[0]”，我根本无法打开模式，添加“[0]”对我来说是一个胜利-下一个目标是现在我要做我在帖子中要求的事情。：）看看最新的答案，其他人都知道了！看起来不错！我将更详细地介绍javascript部分的内容does@SMAKSS就这样。非常感谢。下一个。使模态响应于单击的元素。；）@SMAKSS是的，我试图使用模式中的按钮为触发模式的元素着色。@SMAKSS不是，我不知道我只能选择一个。因为他们都很好，我想感谢他们我把它改回了你的。显然我是新来的@Smaks如果我能让它起作用我甚至会给你施一个幸运符。。。投票表决后（ofc；）
btns.forEach(btn => btn.onclick = function() {modal.style.display = "block";});