点击时切换旋转箭头：JavaScript实现指南-html教程-PHP中文网

点击时切换旋转箭头：JavaScript实现指南

碧海醫心

发布： 2025-10-19 13:15:01

原创

255人浏览过

点击时切换旋转箭头：javascript实现指南

本文旨在解决使用 JavaScript 为多个箭头元素添加点击旋转效果时遇到的 "addEventListener is not a function" 错误。我们将详细介绍如何正确地为通过 `getElementsByClassName()` 获取的元素集合添加事件监听器，并提供两种解决方案：使用 `for` 循环和 `forEach()` 方法，并附带示例代码，帮助你轻松实现箭头旋转效果。

在使用 JavaScript 为页面上的多个元素添加事件监听器时，经常会使用 document.getElementsByClassName() 方法来获取这些元素。然而，直接对 getElementsByClassName() 返回的结果（一个类数组对象 HTMLCollection）调用 addEventListener 方法会导致 "addEventListener is not a function" 错误。这是因为 HTMLCollection 对象本身并不具备 addEventListener 方法，该方法只能直接应用于单个 DOM 元素。

要解决这个问题，我们需要遍历 HTMLCollection 对象，并为其中的每个元素单独添加事件监听器。以下介绍两种常用的方法：

使用 for 循环

for 循环是一种传统的遍历数组的方式，同样适用于 HTMLCollection 对象。

立即学习“Java免费学习笔记（深入）”；

(function (document) {
  const div = document.getElementsByClassName("container");
  const divLen = div.length;
  let open = false;

  for (let i = 0; i < divLen; ++i) {
    div[i].addEventListener("click", function () {
      const icon = this.getElementsByClassName("arrow")[0]; // 获取当前点击的 container 中的 arrow
      if (open) {
        icon.className = "fa fa-arrow-down";
      } else {
        icon.className = "fa fa-arrow-down rotate";
      }

      open = !open;
    });
  }
})(document);

登录后复制

代码解释:

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

首先，使用 document.getElementsByClassName("container") 获取所有 class 为 "container" 的元素，并将结果存储在 div 变量中。
获取 div 的长度，存储在 divLen 变量中，以便在循环中使用。
使用 for 循环遍历 div，对每个元素 div[i] 调用 addEventListener 方法，添加点击事件监听器。
在事件处理函数中，使用 this 关键字引用当前被点击的元素（即 div[i]），然后使用 this.getElementsByClassName("arrow")[0] 获取当前 container 元素内部的 arrow 元素。
根据 open 变量的状态，切换 icon 元素的 class，实现箭头旋转效果。
最后，切换 open 变量的状态，以便下次点击时切换到相反的旋转状态。

注意: 在事件处理函数中使用 this 关键字非常重要，它可以确保我们获取到的是当前被点击的元素，而不是全局的 window 对象。

使用 forEach() 方法

forEach() 方法是 ES6 引入的一种更简洁的数组遍历方式。虽然 HTMLCollection 对象本身没有 forEach() 方法，但我们可以使用 Array.prototype.forEach.call() 将其转换为数组，然后再使用 forEach() 方法。

(function (document) {
  const div = document.getElementsByClassName("container");
  let open = false;

  Array.prototype.forEach.call(div, function (elem) {
    elem.addEventListener("click", function () {
      const icon = elem.getElementsByClassName("arrow")[0];
      if (open) {
        icon.className = "fa fa-arrow-down";
      } else {
        icon.className = "fa fa-arrow-down rotate";
      }
      open = !open;
    });
  });
})(document);

登录后复制

代码解释:

首先，使用 document.getElementsByClassName("container") 获取所有 class 为 "container" 的元素，并将结果存储在 div 变量中。
使用 Array.prototype.forEach.call(div, ...) 将 div 对象转换为数组，并使用 forEach 方法遍历数组中的每个元素。
在 forEach 方法的回调函数中，elem 参数代表当前遍历到的元素。
对每个元素 elem 调用 addEventListener 方法，添加点击事件监听器。
在事件处理函数中，使用 elem.getElementsByClassName("arrow")[0] 获取当前 container 元素内部的 arrow 元素。
根据 open 变量的状态，切换 icon 元素的 class，实现箭头旋转效果。
最后，切换 open 变量的状态，以便下次点击时切换到相反的旋转状态。

注意: 使用 Array.prototype.forEach.call() 可以将类数组对象转换为真正的数组，从而可以使用数组的各种方法，例如 forEach()。

完整示例代码

以下是包含 HTML、CSS 和 JavaScript 的完整示例代码：

HTML:

<div class="container">
  <i class="fa fa-arrow-down arrow"></i>
</div>

<div class="container">
  <i class="fa fa-arrow-down arrow"></i>
</div>

<div class="container">
  <i class="fa fa-arrow-down arrow"></i>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

登录后复制

CSS:

.fa-arrow-down {
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.fa-arrow-down.rotate {
  transform: rotate(180deg);
  transition: transform 1s linear;
}

登录后复制

JavaScript (使用 for 循环):

(function (document) {
  const div = document.getElementsByClassName("container");
  const divLen = div.length;
  let open = false;

  for (let i = 0; i < divLen; ++i) {
    div[i].addEventListener("click", function () {
      const icon = this.getElementsByClassName("arrow")[0];
      if (open) {
        icon.className = "fa fa-arrow-down";
      } else {
        icon.className = "fa fa-arrow-down rotate";
      }

      open = !open;
    });
  }
})(document);

登录后复制

JavaScript (使用 forEach 方法):

(function (document) {
  const div = document.getElementsByClassName("container");
  let open = false;

  Array.prototype.forEach.call(div, function (elem) {
    elem.addEventListener("click", function () {
      const icon = elem.getElementsByClassName("arrow")[0];
      if (open) {
        icon.className = "fa fa-arrow-down";
      } else {
        icon.className = "fa fa-arrow-down rotate";
      }
      open = !open;
    });
  });
})(document);

登录后复制

总结:

通过本文的介绍，你现在应该能够正确地为通过 getElementsByClassName() 获取的元素集合添加事件监听器，并成功实现箭头旋转效果。无论你选择使用 for 循环还是 forEach() 方法，关键在于理解 getElementsByClassName() 返回的是一个 HTMLCollection 对象，需要遍历该对象才能为每个元素单独添加事件监听器。希望本文对你有所帮助!

以上就是点击时切换旋转箭头：JavaScript实现指南的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Windows11记事本写CSS不炸HTML，保姆级防乱码！ Mac Finder右键HTML快速跳转到关联的CSS文件 Windows11如何设置CSS文件默认用VS Code打开 Mac Raycast一键打开最近编辑的HTML+CSS配对 Mac MAMP配置虚拟主机让HTML加载CSS零延迟