Question

我试图用JS调用keydown和keyup事件。但是我得到了语法错误。代码中缺少什么？

HTML：

<body>
    <div class="ryu">
        <div class="ryu-still"></div>
        <div class="ryu-ready"></div>
        <div class="ryu-throwing"></div>
    </div>
    <div class="ryu-cool"></div>
</body>

CSS：

.ryu-cool {
    display: none;
    background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-spirit.jpg');
} 

.ryu-still {
    background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-  spirit.jpg');
}

JS：

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

JSfiddle链接：http://jsfiddle.net/3Ppdf/

Answer 1

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

工作Fiddle

您需要向要监视键盘输入的<div>元素添加选项卡索引。

您的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>

JavaScript还需要更新为：

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

此外，为了使图像正确显示，您必须为<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;
}

否则<div>的宽度和高度为零，因此不会显示在页面上。

Answer 2

您错过了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(); 
        }
     });
});

请参阅更新的JSFiddle：http://jsfiddle.net/3Ppdf/3/

jQuery：keyup和keydown事件

2 个答案: