JQuery Keydown、Keypress、Keycode 等

Question

我正在寻求一些帮助，以了解为什么当前排列中的 Shift 键在按下该键时不会触发。在下面的代码中，每个键/字符都按预期工作，但 Shift 键除外。我很乐意任何人能给我的任何帮助。我已经将 keydown 甚至更改为 keypress, keyup；依然没有。

其中包括实际的代码和一个可以运行所有内容的 fiddle 。

http://jsfiddle.net/yKCSw/

提前致谢!

<pre>
<div id="keyboard">
    <row class="one">
        <key class="single esc">esc</key>
        <key class="single f1">F1</key>
        <key class="single f2">f2</key>
        <key class="single f3">f3</key>
        <key class="single f4">f4</key>
        <key class="single f5">f5</key>
        <key class="single f6">f6</key>
        <key class="single f7">f7</key>
        <key class="single f8">f8</key>
        <key class="single f9">f9</key>
        <key class="single f10">f10</key>
        <key class="single f11">f11</key>
        <key class="single f12">f12</key>
        <key class="single f13">F13</key>
        <div class="clearfix"></div>
    </row>
    <row class="two">
        <key class="double til">~<span>`</span>

        </key>
        <key class="double 1">!<span>1</span>

        </key>
        <key class="double 2">@<span>2</span>

        </key>
        <key class="double 3">#<span>3</span>

        </key>
        <key class="double 4">$<span>4</span>

        </key>
        <key class="double 5">%<span>5</span>

        </key>
        <key class="double 6">^<span>6</span>

        </key>
        <key class="double 7">&<span>7</span>

        </key>
        <key class="double 8">*<span>8</span>

        </key>
        <key class="double 9">(<span>9</span>

        </key>
        <key class="double 0">)<span>0</span>

        </key>
        <key class="double hyp">_<span>-</span>

        </key>
        <key class="double equ">+<span>=</span>

        </key>
        <key class="single delete right">Delete</key>
        <div class="clearfix"></div>
    </row>
    <row class="three">
        <key class="tab left">Tab</key>
        <key class="single q">q</key>
        <key class="single w">w</key>
        <key class="single e">e</key>
        <key class="single r">r</key>
        <key class="single t">t</key>
        <key class="single y">y</key>
        <key class="single u">u</key>
        <key class="single i">i</key>
        <key class="single o">o</key>
        <key class="single p">p</key>
        <key class="double lbrack">{<span>[</span>

        </key>
        <key class="double rbrack">}<span>]</span>

        </key>
        <key class="double bs">|<span>\</span>

        </key>
        <div class="clearfix"></div>
    </row>
    <row class="four">
        <key class="single caps left">Caps lock</key>
        <key class="single a">a</key>
        <key class="single s">s</key>
        <key class="single d">d</key>
        <key class="single f">f</key>
        <key class="single g">g</key>
        <key class="single h">h</key>
        <key class="single j">j</key>
        <key class="single k">k</key>
        <key class="single l">l</key>
        <key class="double col">:<span>;</span>

        </key>
        <key class="double apos">"<span>'</span>

        </key>
        <key class="single return right double">Enter<span>return</span>

        </key>
        <div class="clearfix"></div>
    </row>
    <row class="five">
        <key class="single shft left">Shift</key>
        <key class="single z">z</key>
        <key class="single x">x</key>
        <key class="single c">c</key>
        <key class="single v">v</key>
        <key class="single b">b</key>
        <key class="single n">n</key>
        <key class="single m">m</key>
        <key class="double comm">
            <<span>,</span>
        </key>
        <key class="double great">><span>.</span>

        </key>
        <key class="double quest">?<span>/</span>

        </key>
        <key class="single shft right">Shift</key>
        <div class="clearfix"></div>
    </row>
</div>
</pre>

JQuery -

$('body').on('keydown', function (e) {

    var p = e.which;

    if (p === 27) {
        e.preventDefault();
        $('.esc').addClass('active').siblings().removeClass('active');
    } else if (p === 112) {
        e.preventDefault();
        $('.f1').addClass('active').siblings().removeClass('active');
    } else if (p === 113) {
        e.preventDefault();
        $('.f2').addClass('active').siblings().removeClass('active');
    } else if (p === 114) {
        e.preventDefault();
        $('.f3').addClass('active').siblings().removeClass('active');
    } else if (p === 115) {
        e.preventDefault();
        $('.f4').addClass('active').siblings().removeClass('active');
    } else if (p === 116) {
        e.preventDefault();
        $('.f5').addClass('active').siblings().removeClass('active');
    } else if (p === 117) {
        e.preventDefault();
        $('.f6').addClass('active').siblings().removeClass('active');
    } else if (p === 118) {
        e.preventDefault();
        $('.f7').addClass('active').siblings().removeClass('active');
    } else if (p === 119) {
        e.preventDefault();
        $('.f8').addClass('active').siblings().removeClass('active');
    } else if (p === 120) {
        e.preventDefault();
        $('.f9').addClass('active').siblings().removeClass('active');
    } else if (p === 121) {
        e.preventDefault();
        $('.f10').addClass('active').siblings().removeClass('active');
    } else if (p === 122) {
        e.preventDefault();
        $('.f11').addClass('active').siblings().removeClass('active');
    } else if (p === 123) {
        e.preventDefault();
        $('.f12').addClass('active').siblings().removeClass('active');
    } else if (p === 192) {
        e.preventDefault();
        $('.til').addClass('active').siblings().removeClass('active');
    } else if (p === 49) {
        e.preventDefault();
        $('.1').addClass('active').siblings().removeClass('active');
    } else if (p === 50) {
        e.preventDefault();
        $('.2').addClass('active').siblings().removeClass('active');
    } else if (p === 51) {
        e.preventDefault();
        $('.3').addClass('active').siblings().removeClass('active');
    } else if (p === 52) {
        e.preventDefault();
        $('.4').addClass('active').siblings().removeClass('active');
    } else if (p === 53) {
        e.preventDefault();
        $('.5').addClass('active').siblings().removeClass('active');
    } else if (p === 54) {
        e.preventDefault();
        $('.6').addClass('active').siblings().removeClass('active');
    } else if (p === 55) {
        e.preventDefault();
        $('.7').addClass('active').siblings().removeClass('active');
    } else if (p === 56) {
        e.preventDefault();
        $('.8').addClass('active').siblings().removeClass('active');
    } else if (p === 57) {
        e.preventDefault();
        $('.9').addClass('active').siblings().removeClass('active');
    } else if (p === 48) {
        e.preventDefault();
        $('.0').addClass('active').siblings().removeClass('active');
    } else if (p === 189) {
        e.preventDefault();
        $('.hyp').addClass('active').siblings().removeClass('active');
    } else if (p === 187) {
        e.preventDefault();
        $('.equ').addClass('active').siblings().removeClass('active');
    } else if (p === 8) {
        e.preventDefault();
        $('.delete').addClass('active').siblings().removeClass('active');
    } else if (p === 9) {
        e.preventDefault();
        $('.tab').addClass('active').siblings().removeClass('active');
    } else if (p === 81) {
        e.preventDefault();
        $('.q').addClass('active').siblings().removeClass('active');
    } else if (p === 87) {
        e.preventDefault();
        $('.w').addClass('active').siblings().removeClass('active');
    } else if (p === 69) {
        e.preventDefault();
        $('.e').addClass('active').siblings().removeClass('active');
    } else if (p === 82) {
        e.preventDefault();
        $('.r').addClass('active').siblings().removeClass('active');
    } else if (p === 84) {
        e.preventDefault();
        $('.t').addClass('active').siblings().removeClass('active');
    } else if (p === 89) {
        e.preventDefault();
        $('.y').addClass('active').siblings().removeClass('active');
    } else if (p === 85) {
        e.preventDefault();
        $('.u').addClass('active').siblings().removeClass('active');
    } else if (p === 73) {
        e.preventDefault();
        $('.i').addClass('active').siblings().removeClass('active');
    } else if (p === 79) {
        e.preventDefault();
        $('.o').addClass('active').siblings().removeClass('active');
    } else if (p === 80) {
        e.preventDefault();
        $('.p').addClass('active').siblings().removeClass('active');
    } else if (p === 219) {
        e.preventDefault();
        $('.lbrack').addClass('active').siblings().removeClass('active');
    } else if (p === 221) {
        e.preventDefault();
        $('.rbrack').addClass('active').siblings().removeClass('active');
    } else if (p === 220) {
        e.preventDefault();
        $('.bs').addClass('active').siblings().removeClass('active');
    } else if (p === 20) {
        e.preventDefault();
        $('.caps').addClass('active').siblings().removeClass('active');
    } else if (p === 65) {
        e.preventDefault();
        $('.a').addClass('active').siblings().removeClass('active');
    } else if (p === 83) {
        e.preventDefault();
        $('.s').addClass('active').siblings().removeClass('active');
    } else if (p === 68) {
        e.preventDefault();
        $('.d').addClass('active').siblings().removeClass('active');
    } else if (p === 70) {
        e.preventDefault();
        $('.f').addClass('active').siblings().removeClass('active');
    } else if (p === 71) {
        e.preventDefault();
        $('.g').addClass('active').siblings().removeClass('active');
    } else if (p === 72) {
        e.preventDefault();
        $('.h').addClass('active').siblings().removeClass('active');
    } else if (p === 74) {
        e.preventDefault();
        $('.j').addClass('active').siblings().removeClass('active');
    } else if (p === 75) {
        e.preventDefault();
        $('.k').addClass('active').siblings().removeClass('active');
    } else if (p === 76) {
        e.preventDefault();
        $('.l').addClass('active').siblings().removeClass('active');
    } else if (p === 186) {
        e.preventDefault();
        $('.col').addClass('active').siblings().removeClass('active');
    } else if (p === 222) {
        e.preventDefault();
        $('.apos').addClass('active').siblings().removeClass('active');
    } else if (p === 13) {
        e.preventDefault();
        $('.return').addClass('active').siblings().removeClass('active');
    } else if (p === 16) {
        e.preventDefault();
        $('.shft').addClass('active').siblings().removeClass('active');
    } else if (p === 90) {
        e.preventDefault();
        $('.z').addClass('active').siblings().removeClass('active');
    } else if (p === 88) {
        e.preventDefault();
        $('.x').addClass('active').siblings().removeClass('active');
    } else if (p === 67) {
        e.preventDefault();
        $('.c').addClass('active').siblings().removeClass('active');
    } else if (p === 86) {
        e.preventDefault();
        $('.v').addClass('active').siblings().removeClass('active');
    } else if (p === 66) {
        e.preventDefault();
        $('.b').addClass('active').siblings().removeClass('active');
    } else if (p === 78) {
        e.preventDefault();
        $('.n').addClass('active').siblings().removeClass('active');
    } else if (p === 77) {
        e.preventDefault();
        $('.m').addClass('active').siblings().removeClass('active');
    } else if (p === 188) {
        e.preventDefault();
        $('.comm').addClass('active').siblings().removeClass('active');
    } else if (p === 190) {
        e.preventDefault();
        $('.great').addClass('active').siblings().removeClass('active');
    } else if (p === 191) {
        e.preventDefault();
        $('.quest').addClass('active').siblings().removeClass('active');
    } else if (p === 16) {
        e.preventDefault();
        $('.shft').addClass('active');
    } else if (p === 220) {
        e.preventDefault();
        $('.bs').addClass('active').siblings().removeClass('active');
    }

});

Answer 1

您在添加类后删除了它:{有两个 .shift 按钮}

$('.shft').addClass('active').siblings().not('.shft').removeClass('active');