addEventListener для двух разных массивов - forEach -оптимизация кода - PullRequest
Новая
       8

addEventListener для двух разных массивов - forEach -оптимизация кода

0 голосов
/ 11 февраля 2019

Я только начинаю изучать JavaScript.И у меня есть проблема, чтобы найти улучшение этого кода.

Можно ли включить два разных массива из 'document.querySelectorAll' в одну функцию forEach или другим способом оптимизации кода ниже?Я знаю, как это сделать с одним, но я понятия не имею, как объединить кнопки и секции, которые первый элемент (кнопка [0]) из одного массива переносит в первый (раздел [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]);
});

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Вы можете попробовать добавить 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)
  })

})
0 голосов
/ 11 февраля 2019 
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

Это лучший способ, потому что вы не полагаетесь на положение элемента в массиве разделов, поэтому у него меньше точек сбоя.

ПРИМЕЧАНИЕ: IИспользуется атрибут данных, так как коды и ящики сломали ссылки на якоря, вы можете переключить их на event.target.href

0 голосов
/ 11 февраля 2019

Да, используйте цикл forEach примерно так: 

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