有没有办法优化这个键码列表功能?

时间:2014-02-07 21:17:38

标签: javascript jquery each keycode

我想以更好,更优化的方式编写它。我想也许我应该使用jquery每个函数但不知道如何编写它。基本上有7个按钮的列表,并且NUM键和常规数字键都附加到相关按钮。 HTML在这里http://jsfiddle.net/wAwed/1/

$(document).keydown(function (e) {
    if ($(e.target).is('input') || $(".answerbtns").length != 0 ) { return }
    /* keyboard 1 */

    else if (e.keyCode == 97 || e.keyCode == 49 ) {
        $("#.ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl00_lbAnswers")[0].click();
        e.stopPropagation();
        return false;
    }
    /* keyboard 2 */
    if (e.keyCode == 98 || e.keyCode == 50 ) {
        $("#ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl01_lbAnswers")[0].click();
        e.stopPropagation();
        return false;
    }
    /* keyboard 3 */
    if (e.keyCode == 99 || e.keyCode == 51 ) {
        $("#ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl02_lbAnswers")[0].click();
        e.stopPropagation();
        return false;
    }
    /* keyboard 4 */
    if (e.keyCode == 100 || e.keyCode == 52 ) {
        $("#ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl03_lbAnswers")[0].click();
        e.stopPropagation();
        return false;
    }
    /* keyboard 5 */
    if (e.keyCode == 101 || e.keyCode == 53 ) {
        $("#ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl04_lbAnswers")[0].click();
        e.stopPropagation();
        return false;
    }
    /* keyboard 6 */
    if (e.keyCode == 102 || e.keyCode == 54 ) {
        $("#ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl05_lbAnswers")[0].click();
        e.stopPropagation();
        return false;
    }
    /* keyboard 7 */
    if (e.keyCode == 103 || e.keyCode == 55 ) {
        $("#ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl06_lbAnswers")[0].click();
        e.stopPropagation();
        return false;
    }
});

2 个答案:

答案 0 :(得分:6)

当然,创建一个键码的映射,将键码链接到目标元素,然后使用循环。或者使用对象键/值对。以下是其中两个的示例:

var keys = {
    97: "#.ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl00_lbAnswers",
    49: "#.ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl00_lbAnswers"
}
$(document).keydown(function (e) {
    if ($(e.target).is('input') || $(".answerbtns").length != 0 ) { return }
    /* keyboard 1 */

    if (keys[e.keyCode]) {
        $(keys[e.keyCode])[0].click();
        e.stopPropagation();
        return false;
    }
});

并且,如果他们都有“answerbtns”类,你可以这样做:

var numeric = [97,98,99,100,101,102,103];
var numpad =  [49,50,51,52,53,54,55];
$(document).keydown(function (e) {
    if ($(e.target).is('input') || $(".answerbtns").length == 0 ) { return }
    /* keyboard 1 */
    var index = $.inArray(e.which,numeric);
    if ( index == -1 ) {
        index = $.inArray(e.which,numpad);
    }
    if ( index != -1 ) {
        $(".answerbtns")[index].click();
        e.stopPropagation();
        return false;
    }
});

http://jsfiddle.net/wAwed/2/

答案 1 :(得分:0)

此选项会减少一些代码。

var custKeyCode = [97, 49, 98, 50];

if (e.keyCode == 97 || e.keyCode == 49 ) {
    myid = "#.ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl00_lbAnswers";
}

if (e.keyCode == 98 || e.keyCode == 50 ) {
    myid = "#ctl00_ContentPlaceHolder1_rptrQuizQuestions_ctl01_lbAnswers";
}

......
......

for(var i=0; i<custKeyCode.length; i++){
    if(custKeyCode[i] == e.keyCode){
        $(myid)[0].click();
        e.stopPropagation();
        return false;
    }
 }