按键操作，一个接一个。 （jQuery：RPG对话盒）

Question

我正在尝试用Jquery制作一个小游戏，我想显示一个对话框。

1. 当我按Enter键时，我希望出现text1。
2. 我再次按Enter，它会显示text2等，直到显示7个​​文本。

如果我按Enter键，我会立即得到text2，这是显而易见的，而且我不知道如何解决。

如果您有关于Jquery中更好的优化解决方案的建议，请随时提交，我是新来的学生。

谢谢！

var i = 0;
$(document).keypress(function(e) {
    if(e.which == 13 && i == 0) {
    	$( ".text" ).empty();
        $( ".text" ).append( "Text1" );
        i++;
    }
});
$(document).keypress(function(e) {
    if(e.which == 13 && i == 1) {
    	$( ".text" ).empty();
        $( ".text" ).append( "Text2" );
        i++;
    }
});

Answer 1

不要多次添加keypress事件，请在事件回调函数中使用变量i逻辑，如下所示：

此外，如果您只想清除i的每个评估上的文本，则可以使用.text()来设置元素文本，而不是清除并附加...

var i = 0;
$(document).keypress(function(e) {
    if(e.which == 13) {
        switch(i){
            case 0:
               $( ".text" ).empty();
               $( ".text" ).append( "Text1" );

               //Could do it in one line like:
               //$(".text" ).text("Text1");
               break;
           case 1:
               $( ".text" ).empty();
               $( ".text" ).append( "Text2" );
               break;
           etc....
        }

        i++;
    }
});

Answer 2

我认为这可能会使您更接近。创建要显示的文本消息数组（可变文本）。然后在回车键上按遍历消息，直到用完为止。使用ol'typeof！=='undefined'技巧检查是否已耗尽。

可能有一个更优雅的答案，但我认为这个答案很简单并且易于理解。

<div class="text></div>

<script>
    var i = 0;
    var text = ['text1','text2','text3'];
    $(document).keypress(function(e) {
        if(e.which == 13 && typeof(text[i]) !== 'undefined') {
            $( ".text" ).append( '<p>' + text[i] + '</p>' );
            i++;
        }
    });
</script>