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")
    });
}

只有两个s 处于活动状态的DEMOLI - 它提供了两组单词

否则做

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 回答