使用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"); 
    }); 
});