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

Answer 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的{{3}}属性，您不必费心key（仍然是已弃用的属性），因为您可以获得实际的字符串值表示形式按下的键。

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

2 个答案: