的addEventListener两个不同的阵列 - 的forEach -code优化

Question

我刚开始学习JavaScript。我有一个问题找到一个改进的代码。

是否有可能包括来自“document.querySelectorAll”两个不同的阵列中一个功能的forEach或其他方式来优化tbelow码？我知道如何与一个做，但，我不知道如何按钮和结合部分，所述第一元件（按钮[0]）从一个阵列fefers到另一阵列的第一（第[0]）？我怎么能做出这样的代码更好，这将是更短的AMD更加灵活？

谢谢你的帮助！

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

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

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

节点列表对象是节点的集合，通常是由诸如Node.childNodes和方法如document.querySelectorAll（）属性返回。

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

但正如我所看到的，你尝试通过网页做平滑滚动，我建议用另一种方式做到了。请看看这个codesandbox

这更好的办法，因为你不依赖于部分数组元素的位置，所以有失败的少点。

注：我使用的数据属性，因为codesandbox打破了锚的网址，你可以切换他们event.target.href

Answer 3

您可以通过添加一个forEachand使用它的指数试试

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)
  })

})