[英]How to remove div class using keyup function?
i want to ask you about keyup event listener, mine is not working.我想问你关于 keyup 事件监听器的问题,我的不工作。 when i press the key, it adds pressed class to the div.
当我按下该键时,它会将按下的类添加到 div。 but when i release the key it won't remove the class
但是当我释放密钥时,它不会删除该类
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>
Try with 试试看
HTML: HTML:
<div data-key="55" class="key-item6">
<kbd>7</kbd>
</div>
JS: JS:
$('.key-item6').keyup(function () {
if ($.trim($('.key-item6').val()).length) {
$(this).removeClass('pressed');
}
});
It's hard to tell, but you can do some simple debugging. 很难说,但是您可以执行一些简单的调试。 Change the following line of code:
更改以下代码行:
this.classList.remove('pressed');
To this: 对此:
console.log(this.classList)
Here's how it should look: 外观如下:
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);
If the console displays your element with the class you want to remove, you're on the right track! 如果控制台显示您要删除的类的元素,那么您就走对了!
The problem is with the event handler. 问题出在事件处理程序上。 You are attaching the event handler to key while that is not in focus.
您正在将事件处理程序附加到键上,而该键不在焦点上。 So your keyup event actually triggered on
window
. 因此,您的keyup事件实际上是在
window
触发的。
If you really want to use keyup on the .key
use tabindex
and focus
to the pressed element first. 如果您真的想在
.key
上使用keyup,请使用tabindex
并首先focus
按下的元素上。 See the attached code. 请参阅随附的代码。
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>
Also, e.propertyName
is undefined causing it to return. 同样,
e.propertyName
是未定义的,导致其返回。
My suggestion is to bind keyup to window and use the same method as keyPressed
to remove from classlist. 我的建议是将keyup绑定到window,并使用与
keyPressed
相同的方法从类列表中删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.