用jQuery按下键时显示图像

Question

im trying to make a simple app that when a key is pressed on the users keyboard an image appears respective to that letter. I would like to do this for the entire alphabet (a, b, c...)

if a is pressed a.jpg shows up on my page, if r was pressed r.jpg would appear and so on.

I was going to do this with a mega list of if else statements only im sure there must be another way?

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

Answer 1

This is how I would go about doing this:

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

Here is a working jsFiddle

Source(s)

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

Answer 2

How about an array of image references where the index maps to the evt.which value

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

A bit ugly, probably not the most efficient, but easy to follow :)

Answer 3

I would get the key value and then just match it again az. Try something like:

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

Demo: http://jsfiddle.net/BMZaF/

Answer 4

Seems that event.which for letters corresponds to the ASCII value. So, you could do something like the following:

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

Answer 5

You should named your image files with the alphabet KeyCodes.

For instance the entered letter "a" must be named "97.jpg".

So you can call it from your jquery like this:

$(document).ready(function(){
    $("#input").bind('keypress', function (e) {
        console.log(e.which);  //or alert(e.which);  
        $("#Image").attr("src", e.which + ".jpg");
    });
});