2

Javascript noob here.... 私は、子供たちが選択したグループから定義済みの文を読むのに役立つサイトを構築しようとしています。ボタンをクリックすると、文の 1 つが表示されます。配列はこれに最適なオプションですか?

たとえば、この配列 (以下) があり、ボタンをクリックすると、これらの文の 1 つがページに表示されます。

<script type="text/javascript">
Sentence = new Array()
Sentence[0]='Can we go to the park.';
Sentence[1]='Where is the orange cat? Said the big black dog.';
Sentence[2]='We can make the bird fly away if we jump on something.'
Sentence[3]='We can go down to the store with the dog. It is not too far away.'
Sentence[4]='My big yellow cat ate the little black bird.'
Sentence[5]='I like to read my book at school.'
Sentence[6]='We are going to swim at the park.'
</script>

繰り返しますが、これには配列が最適ですか?どうすれば文を表示できますか? 理想的には、ボタンでこれらの文の 1 つをランダムに選択したいのですが、今はそのうちの 1 つを表示するだけでも役に立ちます。

4

5 に答える 5

3

この目的には配列で問題ありません。

このコードを使用して、指定したdivの文をランダムに表示できます。

var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$('#divid').text(rand); 

//If you don't fancy jQuery then do this instead
document.getElementById('divid').innerHTML = rand;

ワーキングデモ

于 2012-12-07T16:57:20.623 に答える
3

配列を使用するだけで十分簡単です。これを行ってランダムな文を取得する例を次に示します。

 var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
],

//the number of sentences in the array
maxSentences = sentences.length;

//get and return a random sentences from array
function getRandomSentence() {
    //calculate a random index
    var index = Math.floor(Math.random() * (maxSentences - 1));
    //return the random sentence
    return sentences[index];
}

でランダムな文を表示するにはdiv、次のような関数を使用できます: (この例では jQuery を使用して簡素化し、複数のブラウザーで使用できるようにすることに注意してください):

//show a random sentences in a DOM selector
function showRandomSentence(selector){
    var randomSentence = getRandomSentence();  
    $(selector).html(randomSentence);
}

上記の実際の例を見るには、この jsFiddleにアクセスしてください </p>

于 2012-12-07T17:32:23.980 に答える
1

ここにライブの例があります。うまくいけば、あなたはjqueryを使用しています。それは物事を簡単にします。

主要部分はこれで、配列からランダムな文を選択します。

 var randomIndex = Math.floor((Math.random()*Sentence.length)); //random number from [0,Sentence.length)
$("#sentence-div").text( Sentence[randomIndex] );
于 2012-12-07T17:01:44.497 に答える
1

配列は私にとって良い選択のようです。次のように定義することもできます。

var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
];
于 2012-12-07T16:54:52.963 に答える
0

個人的には、 JSONの実装に時間を費やす必要があると思います。

本質的には配列になりますが... JSONはおそらくより柔軟で、必要に応じて質問に関するより多くの情報を埋め込むことができます。

時間が経つにつれて要件がより洗練されたものになる可能性があり、JSON を解析するための余分な時間はかなり些細なことだと思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Simple use of JSON</title>
<script type="text/javascript">
    //ultimately this will be in a file that you will access so you don't have to update code when the list changes.
    var sentence_json = '{ "sentences" : [{ "sentence" : "Can we go to the park.", "difficulty" : "1" },' + 
    '{ "sentence" : "Where is the orange cat? Said the big black dog.", "difficulty" : "2" },' + 
    '{ "sentence" : "We can make the bird fly away if we jump on something.", "difficulty" : "3" },' + 
    '{ "sentence" : "We can go down to the store with the dog. It is not too far away.", "difficulty" : "3" },' + 
    '{ "sentence" : "My big yellow cat ate the little black bird.", "difficulty" : "2" },' + 
    '{ "sentence" : "I like to read my book at school.", "difficulty" : "1" },' + 
    '{ "sentence" : "We are going to swim at the park.", "difficulty" : "1" }]}';

    //this should go through a parser... but for simplest example:
    var sentence_obj = eval ("(" + sentence_json + ")");
</script>
</head>
<body>
<p>
    Sentence: <span id="sentence"></span><br>
    Difficulty: <span id="difficulty"></span><br>
</p>
<script type="text/javascript">
    //here's where you use an iterator, but static for the example.
    document.getElementById("sentence").innerHTML=sentence_obj.sentences[1].sentence 
    document.getElementById("difficulty").innerHTML=sentence_obj.sentences[1].difficulty
</script>       
</body>
</html>

相対的な「最高」かどうかという質問に単純に答えるだけです。HEREは、ボタン「その他」を追加した実際の例です。

于 2012-12-07T17:05:39.330 に答える