3

私のスペリングゲームでは、htmlの単語を「ul」に保存します。次に、これらの単語はグリッドに入力され、人々がそれらを綴ることができるようになります。問題は、リスト内のすべての単語が表示されることです。グリッドを埋めるためにリストからいくつの単語を取得したいかをどこかで言うことができるようにしたいと思います。できればhtmlでそれが欲しいのですが、スクリプトでは問題ありません。

誰かが私がこれを行う方法を教えてもらえますか？

これが単語のリストです...

<ul style="display:none;" id="wordlist">

    <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/porkypig2.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>

    <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/bugsbunny2.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>

    <li data-word="bear" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/a/2/c/0/1195440948271207911zeimusu_spotty_dog.svg.med.png"></li>

    <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/daffyduck2.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li>

    <li data-word="rat" data-audio="http://www.wav-sounds.com/cartoon/bugsbunny1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>

    <li data-word="father" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/3/a/6/6/119544474191128182Gerald_G_Man_Face_6_-_World_Label.svg.med.png"></li>

  </ul>

グリッドを動的に作成するスクリプトはかなり長いので、フィドルを与える方が簡単です... http://jsfiddle.net/smilburn/Dxxmh/18/

4

1 に答える 1

2

ULの数を必要な単語の数に変更するだけでいいようです

for (i = 0; i < ul.children.length; ++i) {
    listOfWords.push({
        "name": ul.children[i].getAttribute("data-word"),
        "pic": ul.children[i].getAttribute("data-pic"),
        "audio": ul.children[i].getAttribute("data-audio")
    });
}

の2 つだけがアクティブなDEMOLI - 2 つの単語のセットが表示されます

そうでなければする

var maxWords = 20; // larger or equal to 6 to cover the picture
for (i = 0; i < maxWords; ++i) {
  listOfWords.push({
    "name": ul.children[i].getAttribute("data-word"),
    "pic": ul.children[i].getAttribute("data-pic"),
    "audio": ul.children[i].getAttribute("data-audio")
  });
}


for (var x = 0; x < listOfWords.length; x++) { // change here too

ランダム

var maxWords = 20; // larger or equal to 6 to cover the picture
var alreadyStored ="";
var aWord,idx;
while (listOfWords.length < maxWords) {
  idx = Math.floor(Math.random()*ul.children.length);
  aWord = ul.children[idx].getAttribute("data-word");
  if (alreadyStored.indexOf("@"+aWord+"@")!=-1) continue;
  listOfWords.push({
    "name": aWord,
    "pic": ul.children[idx].getAttribute("data-pic"),
    "audio": ul.children[idx].getAttribute("data-audio")
  });
  alreadyStored += "@"+aWord+"@";
}
alreadyStored =null;
于 2012-09-17T09:09:50.147 に答える