Question

在我的拼写游戏中，我将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/

Answer 1

在我看来，您只需要将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")
    });
}

DEMO只有两个LI处于活动状态 - 它提供了两组单词

否则做

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;

设置字数限制

1 个答案: