如何在PHP生成的内容的每一行中添加单独的onclick / EventListener函数？

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');
  });
}