为什么我的 javascript 代码可以工作，但只能工作一次？

Question

在我的代码中，当我单击矩形时，该矩形应隐藏，而当我按 Esc 时，该矩形应出现。一切都只有效一次。为什么？我该如何解决这个问题？感谢您的关注。

const myBtn = document.querySelector('[data-btn]')


myBtn.addEventListener('click', (e) => {
   if (e.target === myBtn) {
      myBtn.classList.add('hide')

   }
})


document.addEventListener('keydown', (e) => {
   if (e.code === "Escape") {
      myBtn.classList.add('show')
   }
})

Answer 1

您忘记在显示按钮时删除

hide

属性，以及在隐藏按钮时删除

show

属性。您的代码设置按钮

classList

的方式看起来像那样

[] -> [隐藏] -> [隐藏、显示] ...

但应该看起来像

[] -> [隐藏] -> [显示] ...

Answer 2

根据你的代码，当单击按钮时，它将添加显示类，esc将添加隐藏类

但是如果单击然后按 esc，该按钮将有两个类：隐藏和显示。

所以这是对您的代码的修复：（抱歉我在手机中编码了这个）

const myBtn = document.querySelector('[data-btn]')


myBtn.addEventListener('click', (e) => {
   if (e.target === myBtn) {
      myBtn.classList.add('hide')
      myBtn.classList.remove('show')
   }
})


document.addEventListener('keydown', (e) => {
   if (e.code === "Escape") {
      myBtn.classList.add('show')
      myBtn.classList.remove('hide')
   }
})

如果你的班级只有

display: none

，我建议你使用

myBtn.style.display = 'none'

Answer 3

您可以使用上述方法，但如果它不起作用，还有另一种方法使用

display

属性，用于隐藏您使用

display:none

并显示您使用

display:inline

，代码将如下所示：

const myBtn = document.querySelector('[data-btn]')


myBtn.addEventListener('click', (e) => {
    myBtn.style.display = "none";
})


document.addEventListener('keydown', (e) => {
   if (e.code === "Escape") {
      myBtn.style.display = "inline";
   }
})

并且

e.target == myBtn

可以删除，因为事件 click 分配给 myBtn 而不是整个文档。
在此

链接

中查看有关display

的更多信息