Question

当我的网格被创建时，它应该有6个独特的单词，但目前它会产生6个有时会重复的单词。

我需要有人帮我写一个函数来解决这个问题。

以下是附有声音和图像的单词列表......

<ul style="display:none;" id="wordlist">
  <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.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/porkypig1.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>
  <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li>
  <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.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/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>
  <li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>

最后这是脚本....

        var listOfWords = [];

var ul = document.getElementById("wordlist");

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

console.log(listOfWords);

var chosenWords = [];

  for(var x = 0; x < 6; x++)
{
    var rand = Math.floor(Math.random() * (listOfWords.length));
    console.log('name ' + listOfWords[rand].name);
    chosenWords.push(listOfWords[rand].name);

    if (chosenWords.length < 12){
                chosenWords.push('  ');   
      }

    }

console.log(chosenWords);
var shuffledWords = [];
shuffledWords = chosenWords.sort(function() { return 0.5 - Math.random() });

var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {

    var row = document.createElement('tr');
    console.log(shuffledWords);
   for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        console.log(j);
        console.log(word);
        guesses[word] = [];

        for (var k = 0; k < word.length; ++k) {
             var cell = document.createElement('td');


            $(cell).addClass('drop').attr('data-word', word);
            cell.textContent = word[k];

            row.appendChild(cell);
        }
    }
    tbl.appendChild(row);
}

document.body.appendChild(tbl);

Answer 1

由于它只有六个单词，所以快速执行此操作的方法是循环，直到所选单词列表的大小为六个条目并继续生成随机ID，直到列表中包含非重复单词。您所要做的就是不断检查数组的内容与随机单词的完成情况。

我确信有更优雅的方法，但它会以如此快的速度执行，您的用户不会注意到任何事情。

Answer 2

这是变体：

var helper_array = [];
var keysOfWords= {};
for(i = 0; i < ul.children.length; ++i){

    keysOfWords[ul.children[i].getAttribute("data-word")] = i;
    listOfWords.push({
        "name"   : ul.children[i].getAttribute("data-word"),
        "pic"    : ul.children[i].getAttribute("data-pic"),
        "audio"  : ul.children[i].getAttribute("data-audio")
    });
    helper_array.push({
        "name"   : ul.children[i].getAttribute("data-word"),
        "pic"    : ul.children[i].getAttribute("data-pic"),
        "audio"  : ul.children[i].getAttribute("data-audio")
    });
}

var chosenWords = [];

for(var x = 0; x < 6; x++)
{
    var rand = Math.floor(Math.random() * (helper_array.length));
    console.log('name ' + helper_array[rand].name);
    chosenWords.push(helper_array[rand].name);

    helper_array.splice(rand,1);

    if (chosenWords.length < 12){
        chosenWords.push('  ');   
    }

}

我们需要播放声音的地方：

$("#mysoundclip").attr('src', listOfWords[keysOfWords[rndWord]].audio);

填充网格时确保单词不重复

2 个答案: