jQuery: событие ввода и закрытия клавиш

#javascript #jquery

Вопрос:

Я пытаюсь вызвать событие keydown и keyup с помощью JS. Однако я получаю синтаксическую ошибку. Чего не хватает в коде?

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 /

Ответ №1:

Наряду с проблемами форматирования кода, на которые указывали другие, код по-прежнему не будет функционировать должным образом без небольшого дополнения.

Рабочая скрипка

Вам нужно будет добавить индекс табуляции к <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> s будут иметь нулевую ширину и высоту и, следовательно, не будут отображаться на странице.

1. Вам необходимо предоставить более подробную информацию, если вам нужна помощь в устранении проблемы. Кроме того, вам нужно нажать на <div> , чтобы сфокусироваться на нем, прежде чем вы сможете прослушать события на нем <div> .

Ответ №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 /

1. спасибо, это решило синтаксическую ошибку, но я не могу заставить методы работать, когда я нажимаю клавишу «x».

2. Что должен делать «обновленный jsfiddle»? Для меня это просто пустой экран, и ничего не происходит, независимо от того, какие клавиши вы нажимаете.

3. @Juhana Вы правы … были дополнительные ошибки, упомянутые HJ05 в его ответе. Эта скрипка jsfiddle.net/3Ppdf/5 исправлены некоторые, но не все из них.

4. @Juhana попробуйте перейти по этой ссылке и удерживайте клавишу «x». Я не уверен, что вы можете это видеть. Это то, что он должен делать. С моей стороны это не работает.

5. @ALH Да, я знаю, к чему ты стремишься. Я комментировал для apparatix. В любом случае вы должны привязать событие нажатия клавиш к документу ( $(document).keydown(...) ), потому что фокус обычно находится не в divs; это то, что делает пример streetfighter.