我如何通过单击说出相同类别的100个盒子中的任何一个来打开模态？

Question

单击类为“ today”的第一个元素时，将打开模式。单击“今天”类的所有元素时，如何打开它？

// Get the modal and the open-modal-button
var modal = document.getElementById("modal");
var btn = document.getElementsByClassName("today")[0];

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

      <tr>
        <td class="rowspan" rowspan="2">1</td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
      </tr>
      <tr>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
        <td class="today"></td>
      </tr>

Answer 1

var btn = document.getElementsByClassName("today")[0];将仅返回第一个元素。您可以删除[0]：

var btns = document.getElementsByClassName("today");

并且鉴于它是一个列表，您可以使用for循环遍历它：

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

或带有forEach：

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

Answer 2

由于document.getElementsByClassName的返回值是一个HTML集合，您应该对其进行迭代，并将document.getElementsByClassName事件添加到它们的每个元素中>]。

为了执行此操作，首先应该通过选择器onclick获得具有class="today"的所有元素，因此它将返回具有document.getElementsByClassName('today')的所有元素的HTML集合（类似于对象的数组）。 >

class="today"
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";
  }
}
.today {
  padding: 5px;
  border: 1px solid;
}

#modal {
  display: none;
  margin: 5px;
}