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

问：

在我的代码中，矩形应该在我单击它时隐藏，并在我按下 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')
   }
})

JavaScript 按钮事件点击转义

评论

2赞 Tangentially Perpendicular 8/2/2023

您正在添加类，但不会删除它们。

答：

0赞 strojan 8/2/2023 #1

您忘记在显示按钮时删除属性，在隐藏按钮时忘记删除属性。代码设置按钮的方式如下所示hideshowclassList

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

但应该看起来像

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

1赞 ducc 8/2/2023 #2

根据您的代码，单击按钮时，它将添加 show class，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: nonemyBtn.style.display = 'none'

评论

0赞 Kira Dresst 8/2/2023

谢谢。现在一切正常。

0赞 ducc 8/2/2023

@KiraDresst没问题:)。你能考虑把它标记为答案，这样它就可以帮助人们吗？

0赞 AlirezaBest 8/2/2023 #3

您可以使用上述方法，但是如果它不起作用，则还有另一种方法使用属性，用于隐藏您使用并显示您使用它，代码将如下所示：displaydisplay:nonedisplay: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";
   }
})

并且可以删除，因为事件点击是为 myBtn 分配的，而不是为整个文档分配的。
在此链接中查看更多信息e.target == myBtndisplay

上一个：创建一个返回泛型函数的函数

下一个：在节点边距单击时返回节点