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

【问题标题】：addEventListener for two diffrent arrays - forEach -code optimization两个不同数组的 addEventListener - forEach -代码优化
【发布时间】：2019-02-11 06:48:36
【问题描述】：

我刚刚开始学习 javascript。而且我很难找到对这段代码的改进。

是否可以在一个函数 forEach 或其他方式中包含来自“document.querySelectorAll”的两个不同数组来优化下面的代码？我知道如何使用一个，但是，我不知道如何将一个数组的第一个元素（button[0]）传递给另一个数组的第一个（section[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]);
});

【问题讨论】：

标签： javascript html arrays object webpage

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

NodeList 对象是节点的集合，通常由 Node.childNodes 等属性和 document.querySelectorAll() 等方法返回。

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

但我可以看到，您尝试在页面中进行平滑滚动，我建议通过另一种方式进行。请看看这个codesandbox

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

注意：我使用 data 属性是因为代码和框破坏了锚 url，你可以将它们切换到 event.target.href

【讨论】：

很高兴知道 :) 感谢您为这个案例展示了另一种方式。

【解决方案3】：

您可以尝试添加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)
  })

})

【讨论】：