使用jQuery按下按钮时显示图像

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

我会得到关键值，然后再匹配一次az。尝试是这样的：

$(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

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

例如输入的字母“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"); 
    }); 
});