Как упорядочить такие события, как шаг за шагом, с помощью jQuery, используя ключ?

Question

Я делаю вещь, которая действует как чат-convo, вы можете перейти к другому сообщению, нажав клавишу пробела, но это не сработало, есть живой код:

http://jsfiddle.net/VCpqs/7/

Может кто-нибудь объяснить, как упорядочить события, нажимая клавишу для перехода к следующему сообщению?

Спасибо!

Answer 1

Это то, что вы ищете: http://jsfiddle.net/VCpqs/11/?

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

Это jquery:

$(document).keyup(function(event) {
    if (event.which === 32) {
        if ($('#msg1').hasClass('current'))
        {
            $('#msg1').hide('slow').removeClass('current');
            $('#msg2').show('slow').addClass('current');
        }
        else if ($('#msg2').hasClass('current'))
        {
            $('#msg2').hide('slow').removeClass('current');
            $('#msg3').show('slow').addClass('current');
        }
    }  
}); 

Приятно знать, что вы работаете в цикле. Я просто работал над тем, чтобы реализовать его в цикле, и вот что я получил: http://jsfiddle.net/VCpqs/18/

var messages = new Array('msg1','msg2','msg3');

$(document).keyup(function(event) {
    if (event.which === 32) {
        for (x in messages)
        {
            if ($('#'+messages[x]).hasClass('current'))
            {
                $('#'+messages[x]).hide('slow').removeClass('current');
                $('#'+messages[(parseInt(x)+1)]).show('slow').addClass('current');                
                break;
            }
        }      
    }  
});