按下键盘键时用javascript更改li类的颜色

Question

我已经创建了一个带有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');
});

Answer 1

这对我有用:

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; }

DEMO

注意

如果你希望这封信发光,无论他/她是否按下"X"或"x",请更改:

var which_letter = String.fromCharCode(e.which);

至:

var which_letter = String.fromCharCode(e.which).toLowerCase();

否则,用户必须完全按下字母的值id.