javascript - keydown - 循环访问每个按下的键的对象

Question

我想在按下每个字母键时创建一个页面来显示一些内容(现在是图像和段落)。我可以通过为每个键重复我的代码来做到这一点，但这不是我想要的方式，所以我认为我需要一个循环，但我不知道如何做到这一点。

我可以这样做:

$(document).keydown(function(event) {

if (event.keyCode == 65) {
    $("#paragraph").text("text1");
    $('#divImg').html('img1');
   }


if (event.keyCode == 83) {
    $("#paragraph").text("text2");
    $('#divImg').html('img2');
   }


if (event.keyCode == 68) {
    $("#paragraph").text("text3");
    $('#divImg').html('img3');
   }

}
  );

我想通过使用循环并访问对象数组来完成此操作，如下所示:

var keys = {
                a: {
                    par: "text1",
                    img: "img1"},
                s: {
                    par: "text2",
                    img: "img2"
                },
                d: {
                    par: "text3",
                    img: "img3"
                }
            }

而不是为每个键重复我的代码 25 次(我不需要 25 个 if 语句)，我希望我的代码能够找出我按下的键并从对象中获取他的图像和他的段落。我想不出一种方法来实现它。我尝试将键码转换为字符，但过了一会儿我就陷入了代码困境。

我希望这次我能说得更明确，如果我造成任何混淆，我深表歉意。

Answer 1

我会使用查找表，如下所示:

const keyCodes = {
    65: 'aassdd',
    83: 'dsa',
    68: 'asd'
};

$(document).keydown(function(event) {

   //lookup the text in our table
   const textToSet= keyCodes[event.keyCode];

   //only do stuff if there was an entry in the table
   if (text) {
      $("#paragraph").text(textToSet);
      $('#divImg').html('img src')
   }       
});

如果你想使用查找表中的字符，可以使用String.fromCharCode()进行转换:

const keys = {
    a: 'aassdd',
    s: 'dsa',
    d: 'asd'
};

$(document).keydown(function(event) {

   //get the pressed character (cribbed from https://stackoverflow.com/questions/3977792/how-to-convert-keycode-to-character-using-javascript)
   const characterPressed = String.fromCharCode(event.keyCode);

   //lookup the text in our table
   const textToSet = keys[characterPressed];

   //only do stuff if there was an entry in the table
   if (text) {
      $("#paragraph").text(textToSet);
      $('#divImg').html('img src')
   }       
});