キープレス イベントで配列から一度に 1 つの文字列を表示するスクリプトを作成しようとしています。配列が配列の最後の項目にヒットすると、位置 0 にループバックするため、連続ループが作成されます。現在、各アイテムを一度に 1 つずつ表示するスクリプトがありますが、正しい方法で動作せず、最初にもどりません。
各項目を長いリストとして出力したくありませんが、キーを押すと最初の文字列を表示し、次のキーを押すとdivをクリアし、次の文字列をその場所に表示します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotating Messages</title>
<link href="stylesheets/site.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var i = 0;
var messages=["Tonight I\'m gonna have myself a real good time ",
"I feel alive and the world it\'s turning inside out Yeah! ",
"I\'m floating around in ecstasy ",
"So don\'t stop me now don't stop me ",
"Cause I\'m having a good time having a good time ",
"I\'m a shooting star leaping through the skies ",
"Like a tiger defying the laws of gravity ",
"I\'m a racing car passing by like Lady Godiva ",
"I'm gonna go go go ",
"There\'s no stopping me "]
$(document).ready(function() {
$(document).keypress(function(e) {
if (e.which===13) {
if(i<=messages.length) {
$("#lyrics").append(messages[i]);
i=i+1;
}
}
});
});
</script>
<body>
<div id="wrapper">
<header class="title">
<h1> Fun with Arrays!</h1>
<div id="lyrics"> </div>
</body>