如何在javascript中按下和释放按钮？

Question

我希望它在单击按钮时改变颜色，并在代码中实现它。但如何才能让按钮再次按下时变为原来的颜色呢？所以我希望按钮在单击时变黑，再次单击时变白。

let pushButtons = document.querySelectorAll('.card__itemsize')
pushButtons.forEach( pushButton => 
  {  
  pushButton.addEventListener('click', (e) => 
    { 
    if (e.target === pushButton) 
      { 
      pushButton.classList.add('clickSizeBlack')
      }
    }) 
  })

Answer 1

您需要添加 else 语句，就像

button

具有

clickSizeBlack

类一样，然后删除

clickSizeBlack

类并将

clickSizeWhite

类添加到该按钮。 否则总是添加

clickSizeBlack

类。

buttons.forEach(button => {
    button.addEventListener('click', function() {
        if (button.classList.contains('clickSizeWhite')) {
            button.classList.remove('clickSizeWhite');
            button.classList.add('clickSizeBlack');
        } else if (button.classList.contains('clickSizeBlack')) {
            button.classList.remove('clickSizeBlack');
            button.classList.add('clickSizeWhite');
        } else {
            button.classList.add('clickSizeWhite');
        }
    });
});