如何使用keyup函數刪除div類？

Question

我想問你關於 keyup 事件監聽器的問題，我的不工作。 當我按下該鍵時，它會將按下的類添加到 div。 但是當我釋放密鑰時，它不會刪除該類

 function keyPressed(e){ const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); key.classList.add('pressed'); } function removePressed(e) { if(e.propertyName !== 'opacity') return; this.classList.remove('pressed'); } const keys = document.querySelectorAll('.key'); keys.forEach(key => key.addEventListener('keyup', removePressed)) window.addEventListener('keydown', keyPressed);

 .pressed { transform: scale(1.0); opacity: 0.7; }

 <div data-key="55" class="key item6"> <kbd>7</kbd> </div>

Answer 1

試試看

HTML：

<div data-key="55" class="key-item6">
      <kbd>7</kbd>        
    </div>

JS：

$('.key-item6').keyup(function () {
    if ($.trim($('.key-item6').val()).length) {         
        $(this).removeClass('pressed');
    }
});

Answer 2

很難說，但是您可以執行一些簡單的調試。 更改以下代碼行：

  this.classList.remove('pressed');

對此：

  console.log(this.classList)

外觀如下：

function keyPressed(e){
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  key.classList.add('pressed');
}
function removePressed(e) {
  if(e.propertyName !== 'opacity') return;
  console.log(this.classList)
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('keyup', removePressed))
window.addEventListener('keydown', keyPressed);

如果控制台顯示您要刪除的類的元素，那么您就走對了！

Answer 3

問題出在事件處理程序上。 您正在將事件處理程序附加到鍵上，而該鍵不在焦點上。 因此，您的keyup事件實際上是在window觸發的。

如果您真的想在.key上使用keyup，請使用tabindex並首先focus按下的元素上。 請參閱隨附的代碼。

 function keyPressed(e){ const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); key.classList.add('pressed'); key.focus(); } function removePressed(e) { // if(e.propertyName !== 'opacity') return; this.classList.remove('pressed'); } const keys = document.querySelectorAll('.key'); keys.forEach(key => key.addEventListener('keyup', removePressed)) window.addEventListener('keydown', keyPressed); 

 .pressed { transform: scale(1.0); opacity: 0.7; } 

 <div data-key="55" class="key item6" tabindex=0> <kbd>7</kbd> </div> 

同樣， e.propertyName是未定義的，導致其返回。

我的建議是將keyup綁定到window，並使用與keyPressed相同的方法從類列表中刪除。