Question

我对使用JavaScript编程非常陌生，很想获得更多经验，我的问题实际上不是问题，它更像是优化代码，我一直在努力进行所谓的“分页”点导航。您可以在此代码笔https://codepen.io/Tarek-Chentouf/pen/ajqXpW中找到我的代码示例。我的代码如下：

"use strict";

var buttons = document.querySelectorAll('.button__outline');

function reset() {
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].classList.remove('active');
    }
}

function addActive() {
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
            if (i == 0) {
                reset();
                buttons[0].classList.add('active');
            }
            if (i == 1) {
                reset();
                buttons[1].classList.add('active');
            }
            if (i == 2) {
                reset();
                buttons[2].classList.add('active');
            }
            if (i == 3) {
                reset();
                buttons[3].classList.add('active');
            }
        });
    }
}
addActive();

我的问题如下：是否有更好的方法可以达到相同的结果而不必重复if语句？谢谢大家。

Answer 1

在一般情况下，您只需访问buttons[i]而不是if (i == 0) ... buttons[0] ... if (i == 1) ... buttons[1] ...：

function addActive() {
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      reset();
      buttons[i].classList.add('active');
    });
  }
}

但是您可以使用forEach来使代码更简洁，更干-而不是访问buttons集合的索引，而是将要迭代的按钮抽象为自己的变量：< / p>

function addActive() {
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      reset();
      button.classList.add('active');
    });
  });
}

或者，正如Patrick Roberts建议的那样，您可以将所有classList更改都移到reset函数中，并在容器上使用事件委托（这样，您只需要一个侦听器，而不需要多个侦听器）：

document.querySelector('.container').addEventListener('click', ({ target }) => {
  if (!target.matches('.button__outline')) return;
  reset(target);
});
const buttons = document.querySelectorAll('.button__outline');
function reset(showButton) {
  buttons.forEach(button => {
    button.classList.remove('active');
  })
  showButton.classList.add('active');
}
reset(buttons[0]);

使用纯JavaScript的分页

1 个答案: