本文旨在解决使用 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);
代码解释:
首先，使用 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:
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实现指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586353.html
微信扫一扫 
支付宝扫一扫 
