javascript - 如何将单独的 onclick/EventListener 函数添加到每行 PHP 生成的内容中？

Question

尝试使用 onclick 事件单独扩展 PHP 生成的 div。如何向每个 div 对象添加 EventListener 或 onclick 函数，以便我可以通过单击它们来单独展开它们？

现在我想做这样的事情:

document.getElementsByClassName('card').addEventListener('click', function() {
  document.getElementsByClassName('card').classList.toggle('expand');
});

在 for 循环中:

echo "<div class='card z-depth-1'>
      <div class='event-text'>
      <p class='event-time white-text'>" . date('H:i',strtotime($array[$i]['DTSTART'])) . "</p>
      <p class='event-information red-text text-lighten-4'>" . explode("\\,", $array[$i]['SUMMARY'])[0] . " " . $type . " " . str_replace('Lokal : ', '', $array[$i]['LOCATION']) . "</p>
      <p><br><br>Lorem ipsum leo cursus commodo quam dapibus metus dictumst etiam, quisque posuere ut molestie quam ad duis neque quis adipiscing posuere cras vulputate augue curae, leo lacinia diam ullamcorper aenean, ipsum donec luctus quam ad.</p>
      </div>
      </div>
      </div>";

CSS:

.card {
  max-height: 10vh;
  overflow: hidden;
}
.card.expand {
  max-height: 20vh;
  overflow: hidden;
}

Answer 1

由于 document.getElementsByClassName('card') 返回元素的 HTMLCollection 而不是单个元素，您将必须遍历卡片以附加事件。

像这样:

var cards = document.getElementsByClassName('card');

for (let card of cards) {
  card.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}