forEach 重复函数答案

【问题标题】：forEach repeats functionsforEach 重复函数
【发布时间】：2026-02-09 18:15:02
【问题描述】：

 document.querySelectorAll('.item').forEach(item => item.addEventListener (
    'click', function () {
        console.log('Hello World!')
    }
))

<div class="container">
  <article class="item">3</article>
  <article class="item">2</article>
  <article class="item">1</article>
</div>

如您所见，我有一个包含三个子元素的容器。我想在其中一篇文章被按下时显示'Hello World!'。

当我按下内容为 3 的文章时，控制台会显示：

当我按第二篇文章时：

当我按最后一篇文章时，它只显示一个“Hello World！”在控制台中（必须如何）。因此，似乎正在重复此功能。以及如何解决？

【问题讨论】：

仅供参考，ID 应该是唯一的。此标记无效。使用类，或选择所有articles。
哦，我用的是我刚刚改过的类，我改得真快
我没有发现问题。这些数字应该只是您点击的次数。它不是重复输出，而是在输出旁边添加一个数字。
我投票结束这个问题，因为这个问题不可重现。如果 Asker 认为它是可重现的，他们应该用可运行的 sn-p 来证明它。

标签： javascript html function foreach

【解决方案1】：

我认为您的代码实际上正在执行您想要的操作，但您可能错误地解释了每个控制台日志旁边的数字。

控制台日志条目旁边的数字表示该特定消息在某个时间间隔内被记录了多少次。

如果您将每个侦听器更改为还记录每个元素特定的数据，那么每个元素的侦听器只会触发一次就会变得更加清楚。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>* Example</title>
    </head>
    <body>
        <div class="container">
            <article class="item">3</article>
            <article class="item">2</article>
            <article class="item">1</article>
        </div>
        <script>
            window.onload = function () {
                document.querySelectorAll(".item").forEach((item, index) =>
                    item.addEventListener("click", function () {
                        console.log("Hello World!", index);
                    })
                );
            };
        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

将您的 id 更改为类：

<div class="container">
  <article class="item">3</article>
  <article class="item">2</article>
  <article class="item">1</article>
</div>

然后更新查询选择器：

document.querySelectorAll('.item').forEach(item => item.addEventListener (
    'click', function () {
        console.log('Hello World!')
    }
));

ID 必须是唯一的，就像 wazz 的评论一样。

【讨论】：

结果是一样的...