gpt4 book ai didi

jquery - 通过 jquery 将按键功能添加到 div

转载 作者:太空宇宙 更新时间:2023-11-04 08:02:15 25 4
gpt4 key购买 nike

我正在尝试添加一个按键监听器,它只监听 'a' 的按键,当它被触发时,背景将变成透明的白色,其边框略微变灰。

这就是我所拥有的,但不知何故它不起作用。 (不要介意其他 CSS 类,它们只是用于字体装饰)有人可以告诉我我没有看到的东西吗?

$( "#test" ).keypress(function( event ) {
//I think 97 is the character code for 'a'
if(event.which == 97){
$(this).addClass('.test_card');
}else{
event.preventDefault();
}
});
body{background: black;
}

.card{
background-color:transparent;
width:10%;
margin-left:1.25%;
height: 100%;
border: white solid 2px;
display:inline-block;
color: white;
}
.test_card{
background-color: rgba(255, 255, 255, .3);
border: grey solid 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="card" id="test">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</body>

最佳答案

addClass('.test_card') 中移除 .。还要将事件绑定(bind)到文档而不是 div,以便每次按下 a 时都会触发事件

$(document).keypress(function(event) {
if (event.which == '97') {
$('#test').addClass('test_card');
}
});
body {
background: black;
}

.card {
background-color: transparent;
width: 10%;
margin-left: 1.25%;
height: 100%;
border: white solid 2px;
display: inline-block;
color: white;
}

.test_card {
background-color: rgba(255, 255, 255, .3);
border: grey solid 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="card" id="test">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</body>

关于jquery - 通过 jquery 将按键功能添加到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46922824/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com