Question

我试图创建一个简单的应用程序，当用户键盘上按下一个键时，图像将显示为该字母。我想对整个字母表（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');
  }
})

Answer 1

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

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

<强>来源（S）

jQuery API - keydown
jQuery API - Attribute Equals Selector
MDN - String.split

Answer 2

索引映射到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);
    }
})

有点难看，可能不是最有效的，但很容易遵循：）

Answer 3

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

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

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

Answer 4

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

$(window).keydown(function(evt) {
  if (evt.which >= 65 && evt.which <= 90){
    $('img[src="' + String.fromCharCode(evt.which).toLowerCase() + '.jpg"]').show();        
  }
});

Answer 5

您应该使用字母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");
    });
});

使用jQuery按下键时显示图像

5 个答案: