我用 HTML 和 CSS 创建了一个键盘,我试图在键盘上按下相同的键时使键“发光”并具有不同的背景颜色(现实生活中的键盘) .
看起来像这样:
<div id="keyboard">
<ul class="row">
<li class="letter">Q</li>
<li class="letter">W</li>
.
.
.
</ul>
</div>
我有以下 javascript 代码:
$('#keyboard .letter').keydown(function() {
$(this).addClass('red');
}).keyup(function() {
$(this).removeClass('red');
});
最佳答案
这对我有用:
HTML
<div id="keyboard">
<ul class="row">
<li class="letter" id="q">Q</li>
<li class="letter" id="w">W</li>. . .</ul>
</div>
jQuery
$(document).keypress(function(e){
var which_letter = String.fromCharCode(e.which);
$('#'+which_letter+'').addClass('red');
});
$(document).keyup(function(){
$(".letter").removeClass('red');
});
CSS
.red { color:#f00; }
注意事项
如果您希望无论他/她按下“X”还是“x”,字母都会发光,请更改:
var which_letter = String.fromCharCode(e.which);
到:
var which_letter = String.fromCharCode(e.which).toLowerCase();
否则用户必须准确地按下字母的 id
的值。
关于javascript - 按下键盘键时使用javascript更改li类的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21481886/