1

我试图制作一个简单的应用程序，当在用户键盘上按下一个键时，会出现一个与该字母相对应的图像。我想对整个字母表（a，b，c ...）执行此操作

如果 a 被按下 a.jpg 会出现在我的页面上，如果 r 被按下 r.jpg 会出现等等。

我打算用一个巨大的 if else 语句列表来做到这一点，只是我确定必须有另一种方法？

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
      alert('sdf');
  }
})
4

5 回答 5

2

这就是我要这样做的方式：

var letters = "abcdefghijklmnopqrstuvwxyz";
letters = letters.split("");
//I'm lazy; you should define an array of letters

$(window).keydown(function(e){
    key = e.which - 65; //makes a-z = 1-27
    key = letters[key];
    $('img[src="' + key + '.jpg"]').show();
}

这是一个工作的jsFiddle

来源

jQuery API - keydown
jQuery API - 属性等于选择器
MDN - String.split

于 2013-04-08T09:00:47.877 回答
0

您应该使用字母 KeyCodes 命名您的图像文件。

例如输入的字母“a”必须命名为“97.jpg”。

因此，您可以像这样从 jquery 中调用它：

$(document).ready(function(){
    $("#input").bind('keypress', function (e) {
        console.log(e.which);  //or alert(e.which);  
        $("#Image").attr("src", e.which + ".jpg");
    });
});
于 2013-04-08T09:10:28.560 回答
0

我会得到键值，然后再次匹配它。尝试类似：

$(window).keydown(function(e) {
    var key = String.fromCharCode(e.which).toLowerCase();
    if(/[a-z]/i.test(key)) {
        alert(key+'.jpg');
    }
});

演示：http: //jsfiddle.net/BMZaF/

于 2013-04-08T09:05:29.180 回答
0

似乎 event.which 对于字母对应于 ASCII 值。因此，您可以执行以下操作：

$(window).keydown(function(evt) {
  if (evt.which >= 65 && evt.which <= 90){
    $('img[src="' + String.fromCharCode(evt.which).toLowerCase() + '.jpg"]').show();        
  }
});
于 2013-04-08T09:06:12.583 回答
0

索引映射到 evt.which 值的图像引用数组怎么样

var images=[];
images[64]='a.jpg';
images[65]='b.jpg';
images[66]='c.jpg';
//...etc...

$(window).keydown(function(evt) {
    var image=images[evt.which]'
    if(image){
        alert(image);
    }
})

有点难看，可能不是最有效的，但很容易理解:)

于 2013-04-08T09:04:24.127 回答