两个不同数组的 addEventListener - forEach - 代码优化

Question

我才刚刚开始学习javascript。我在寻找对此代码的改进时遇到了问题。

是否可以在一个函数中包含两个来自 'document.querySelectorAll' 的不同数组 forEach 或其他优化 tbelow 代码的方法？我知道如何用一个来做到这一点，但是，我不知道如何组合按钮和部分，即一个数组的第一个元素（按钮 [0]） fefers 到另一个数组的第一个（部分 [0]）？我怎样才能使这段代码更好，更短更灵活？

感谢您的帮助！

function scrollSections(element) {
  window.scrollTo({
    'behavior': 'smooth',
    'left': 0,
    'top': element.offsetTop
  });
}

const btns = document.querySelectorAll('.js-btn');
const sections = document.querySelectorAll('.js-section');

btns[0].addEventListener('click', () => {
  scrollSections(sections[0]);
});

btns[1].addEventListener('click', () => {
  scrollSections(sections[1]);
});

btns[2].addEventListener('click', () => {
  scrollSections(sections[2]);
});

btns[3].addEventListener('click', () => {
  scrollSections(sections[3]);
});

Answer 1

是的，像这样使用 forEach 循环：

const btns = document.querySelectorAll('.js-btn');
const sections = document.querySelectorAll('.js-section');
btns.forEach((btn, index) => btn.addEventListener("click", () => scrollSections(sections[index])));

Answer 2

您可以尝试添加 forEach 并使用它的索引

function scrollSections(element) {
  window.scrollTo({
    'behavior': 'smooth',
    'left': 0,
    'top': element.offsetTop
  });
}

const btns = document.querySelectorAll('.js-btn');
const sections = document.querySelectorAll('.js-section');



btns.forEach((item, index) => {
  item.addEventListener('click', (e) => {
    scrollSections(index)
  })

})

Answer 3

const btns = document.querySelectorAll('.js-btn');

btns.forEach( (btn, index) => {
  btn.addEventListener('click', () => {
    scrollSections(sections[index]);
  });
});

NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll().

https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Methods

但据我所知，您尝试在页面中进行平滑滚动，我建议您通过其他方式实现。请看这个codesandbox

这种更好的方法因为您不依赖于元素在 sections 数组中的位置，所以失败点更少。

注意：我使用了 data 属性，因为 codesandbox 破坏了锚点 url，你可以将它们切换为 event.target.href

两个不同数组的 addEventListener - forEach - 代码优化

addEventListener for two diffrent arrays - forEach -code optimization

html

javascript

arrays

webpage

object