Скрытие и отображение изображения с помощью функции keydown в jQuery

Question

Я пытаюсь скрыть изображение и показать другое (по существу, их замену), когда нажата клавиша «x» с помощью jQuery. Вот кусок кода, который я пытаюсь исправить (это в настоящее время не работает):

.keydown(function(key){ 
    if (key.keyCode == '88') { 
     $('.ryu-still').hide(); 
     $('.ryu-cool').show(); 
} 
}); 

А вот полный .js код:

$(document).ready(function(){ 
    $('.ryu').mouseenter(function(){ 
     $('.ryu-still').hide(); 
     $('.ryu-ready').show(); 
    }) 
    .mouseleave(function() { 
     $('.ryu-still').show(); 
     $('.ryu-ready').hide(); 
    }) 
    .mousedown(function(){ 
     playHadouken(); 
     $('.ryu-ready').hide(); 
     $('.ryu-throwing').show(); 
     $('.hadouken').finish().show().animate(
      {'left': '1020px'}, 
      500, 
      function(){ 
       $(this).hide(); 
       $(this).css('left', '520px'); 
      }); 
    }) 
    .mouseup(function(){ 
     $('.ryu-throwing').hide(); 
     $('.ryu-ready').show(); 
    }) 
    .keydown(function(key){ 
    if (key.keyCode == '88') { 
     $('.ryu-still').hide(); 
     $('.ryu-cool').show(); 
} 
}); 

}); 

function playHadouken() { 
    $('#hadouken-sound')[0].volume = 0.5; 
    $('#hadouken-sound')[0].load(); 
    $('#hadouken-sound')[0].play(); 
} 

Вы можете найти полный проект здесь: https://github.com/elisuh/jquery-streetfighter

Answer 1

Фигурные это! Не знал о разнице чисел/строк. Ниже мое решение. Спасибо всем.

$(document).on('keydown', function(key) { 
    if (key.keyCode === 88) { 
     $('.ryu-still').hide(); 
     $('.ryu-ready').hide(); 
     $('.ryu-cool').show(); 
    } 
}); 

Answer 2

Они код ключа является число (а не строку)

Смотрите, если это поможет.

$(document).ready(function() { 
 
    $('.ryu-ready').hide(); 
 
    
 
    $(document).on('keydown', function(key) { 
 
    
 
    
 
    if (key.keyCode === 88) { 
 
     $('.ryu-still').toggle(); 
 
     $('.ryu-ready').toggle(); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="ryu-still">Still</button> 
 
<button class="ryu-ready">Ready</button> 
 

 

 
<div classs="ryu">show or hide</div>