时间戳

首页 > 解决方案 > 类型错误：slides.forEach 不是函数

javascript - 类型错误：slides.forEach 不是函数

问题描述

我最近开始学习 JS 库，并尝试在按钮（单击点时向下移动的幻灯片）处于活动状态时将其设为白色。

我得到了这个错误：

类型错误：slides.forEach 不是函数

我的代码是：

function init() {
  // wrapper function
  const slides = document.querySelectorAll(".slide");
  const pages = document.querySelectorAll(".page");
  const backgrounds = [
    `radial-gradient(#2B3760, #0B1023)`,
    `radial-gradient(#4E3022, #161616)`,
    `radial-gradient(#4E4342, #161616)`
  ];

  slides.forEach((slide, index) => {
    slide.addEventListener("click", function() {
      changeDots(this);
    });
  });

  function changeDots(dot) {
    slides.forEach(slide => {
      slide.classList.remove("active");
    });
    dot.classList.add("active");
  }
}

init();

我做错了什么？我想这是关于箭头的，但仍然不明白为什么我的朋友可以运行它并且它有效，而对我来说却没有。（我将 GSAP 中的 TweenMax.min.js 和 TimelineMax.min.js 添加到了我的 html 中） 在此之前，我在“querySelectorALL”中遇到了同样的问题，我删除了“ALL”，Chrome 也停止喊它不是一个函数.

谢谢！

标签： javascript

解决方案

因为它不是array你应该使用querySelectorAll 而不是querySelector它会返回NodeLists

const slides = document.querySelectorAll(".slide");
slides.forEach(node => {
 node.addEventListener("click", function() {
      changeDots(this);
    });
});
 function changeDots(node){
  slides.forEach(slide => {
      slide.classList.remove("active");
    });
    node.classList.add("active");
 }
.active{
  background-color:#fc0;
}
<div class="slide">
  1st slide
</div>

<div class="slide">
  2nd slide
</div>

推荐阅读