Javascript jQuery:keyup和keydown事件

我试图用JS调用keydown和keyup事件。不管我有没有语法错误。代码中缺少什么

HTML:

JS:

---

JSfiddle链接：

您缺少

if

语句的结束括号。您的代码应该是：

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

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

---

请参阅更新的JSFIDLE:

以及其他人指出的代码格式问题，如果没有少量添加，代码仍然无法按预期运行

工作

您需要向要监视键盘输入的

元素添加选项卡索引

您的HTML应该如下所示：

<div class="main">
    <div tabindex="0" class="ryu">
        <div class="ryu-still"></div>
        <div class="ryu-ready"></div>
        <div class="ryu-cool"></div>
        <div class="ryu-throwing"></div>
    </div>
</div>

此外，要使图像正确显示，您必须为

指定明确的宽度和高度：

.ryu-cool {
    display: none;
    background-image: url('http://www.theprojectors.co.uk/img/p/187-219-thickbox.jpg');
    width: 600px;
    height: 600px;
}
.ryu-still {
    background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-spirit.jpg');
    width: 550px;
    height: 364px;
}

---

否则，

s的宽度和高度将为零，因此不会显示在页面上。

if（）{

missing end

}

。还有额外的

}）

。复制粘贴？jsfiddle中有一个

tiddle

uption可用。谢谢，它解决了语法错误，但当我按“x”键时，我无法让方法工作。“更新的jsfiddle”应该做什么？对我来说，这只是一个空屏幕，无论你按什么键都不会发生任何事情。@Juhana你说得对……正如HJ05在他的回答中提到的，还有其他错误。这把小提琴修复了一些，但不是全部。@Juhana尝试此链接并按住“x”。我不确定你是否能看到它。这就是它应该做的。这在我这边不起作用。@ALH是的，我知道你的目标。我是在给幻影评论。在任何情况下，都应该将keydown事件绑定到文档（

$（document）.keydown（…）

），因为焦点通常不在divs中；这就是streetfighter示例所做的。如果需要帮助解决问题，您需要提供更多详细信息。此外，在收听有关该

的事件之前，您必须单击

使其成为焦点。

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

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

<div class="main">
    <div tabindex="0" class="ryu">
        <div class="ryu-still"></div>
        <div class="ryu-ready"></div>
        <div class="ryu-cool"></div>
        <div class="ryu-throwing"></div>
    </div>
</div>

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

.ryu-cool {
    display: none;
    background-image: url('http://www.theprojectors.co.uk/img/p/187-219-thickbox.jpg');
    width: 600px;
    height: 600px;
}
.ryu-still {
    background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-spirit.jpg');
    width: 550px;
    height: 364px;
}