JS实现轮播容器时遭遇'foreach is not function'错误的解决求助

嘿，我瞅了你的代码，立马就找到问题根源啦！

你这里的核心错误是把单个DOM元素当成数组来调用forEach方法了：

• 你用[...document.querySelectorAll('.border-box')]把获取到的DOM集合转成了数组featureContainers，这一步是对的
• 但你接下来写了featureContainers[0].forEach(...)，featureContainers[0]是数组里的第一个DOM元素，DOM元素本身并没有forEach方法，所以才会抛出forEach is not a function的错误

修复后的代码 #

你只需要直接对featureContainers数组调用forEach就行，不用取索引0：

const featureContainers = [...document.querySelectorAll('.border-box')];
const cursorRight = [...document.querySelectorAll('.cursor1')];
const cursorLeft = [...document.querySelectorAll('.cursor2')];

// 直接遍历featureContainers数组，不用取[0]
featureContainers.forEach((objek, ruang) => {
    let featureDimensions = objek.getBoundingClientRect();
    let featureWidth = featureDimensions.width;

    cursorRight[ruang].addEventListener('click', () => {
        objek.scrollLeft += featureWidth;
    })

    cursorLeft[ruang].addEventListener('click', () => {
        objek.scrollLeft -= featureWidth;
    })
});

额外小提示 #

我注意到你的箭头选择器可能搞反了：

• .cursor1对应的是左箭头符号❮，但你把它赋值给了cursorRight变量
• .cursor2对应的是右箭头符号❯，却赋值给了cursorLeft变量
  这会导致点击左箭头时向右滚动，点击右箭头时向左滚动，和用户预期的方向相反，建议你把变量名调整一下，或者交换选择器，比如：

// 修正箭头变量名和选择器对应关系
const cursorLeft = [...document.querySelectorAll('.cursor1')]; // 左箭头
const cursorRight = [...document.querySelectorAll('.cursor2')]; // 右箭头

这样点击逻辑就和箭头显示的方向一致啦！

备注：内容来源于stack exchange，提问作者Babay