سؤال

I want to write it in a better, optimized way. I thought maybe I should use jquery each function but not sure how to write it. Basically there are list of 7 buttons and both NUM keys and regular number keys are attached to related buttons. the HTML is here 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;
    }
});
هل كانت مفيدة؟

المحلول

sure, create a map of keycodes that link keycodes to the target element, then use a loop. Or use object key/value pairs. Here's a sample for two of them:

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

And, if they all have the class "answerbtns", you can do this:

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/

نصائح أخرى

This option reduces some code.

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;
    }
 }
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top