keydown - 为每个按下的键创建一个循环来访问一个对象答案

【问题标题】：keydown - making a loop to acces an object for each key pressedkeydown - 为每个按下的键创建一个循环来访问一个对象
【发布时间】：2019-02-03 05:44:42
【问题描述】：

当我按下每个字母键以显示某些内容（现在是图像和段落）时，我想制作一个页面。我可以通过为每个键重复我的代码来做到这一点，这不是我想要的，所以我认为我需要一个循环，但我不知道该怎么做。

我可以这样做：

$(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 语句），我希望我的代码弄清楚我按下了什么键并从对象中获取他的图像和他的段落。我想不出办法来实现它。我试图将键码转换为字符，但过了一会儿我卡在了代码中。

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

【问题讨论】：

您只想从keys 对象中获取值吗？如果是这样，您应该明确说明，并可能将文本从 aassdd 更改为 text1，以便他们同意。目前尚不清楚这是否是您要问的。
是的，抱歉，我刚刚编辑了我的帖子。

标签： javascript jquery

【解决方案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')
   }       
});

【讨论】：

【解决方案2】：

你可以这样做：

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

const paragraphEl = document.querySelector('#paragraph');
const divImgEl = document.querySelector('#divImg');
const errorEl = document.querySelector('#error');
document.addEventListener('keydown', e => {
  errorEl.innerHTML = '';
  if (keys[e.key]) {
    paragraphEl.innerHTML = keys[e.key].par;
    divImgEl.innerHTML = keys[e.key].img;
  } else {
    paragraphEl.innerHTML = '';
    divImgEl.innerHTML = '';
    errorEl.innerHTML = `No key mapping found for "${e.key}"`;
  }
});

<div id="paragraph"></div>
<div id="divImg"></div>
<div id="error"></div>

通过评估KeyBoardEvent 的key 属性，您不必为charCodes（无论如何这是一个已弃用的属性）而烦恼，因为您获得了按下的键的实际字符串值表示.

【讨论】：