javascript - 使用 jQuery 中的 keydown 函数隐藏和显示图像

Question

当使用 jQuery 按下“x”键时，我试图隐藏一个图像并显示另一个图像(本质上是交换它们)。这是我试图修复的代码片段(当前不起作用):

    .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).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>