确保填充网格时单词不会重复
Making sure words do not repeat when populating grid
当我的网格创建时,它应该有6个唯一的单词,但目前它生成了6个单词,这些单词有时是重复的。
我需要有人帮我写一个函数来解决这个问题。
给我小提琴。。。http://jsfiddle.net/qBzPx/
这是附有声音和图像的单词列表。。。
<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);
这是变体:
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);
由于它只有六个单词,因此一种快速的方法是循环,直到所选单词列表的大小为六个条目,并不断生成随机ID,直到列表中有不重复的单词。您所要做的就是不断对照随机单词检查数组的内容,直到完成为止。
我相信还有更优雅的方法,但它执行得很快,用户不会注意到任何东西。
相关文章:
- Laravel 5.2动态下拉选择不填充(javascript)
- Regex:匹配以“AM”结尾的单词(不区分大小写比较)
- 确保填充网格时单词不会重复
- 单词与正则表达式中的单词不相邻
- 如果(随机)单词不存在,则完全重复/重新启动功能
- 键入.js脚本在iPhone6中不起作用,如果任何单词将在该行完成,在这种情况下,另一个单词不键入,仅显示光标
- Angular UI路由器-尽管$stateParams获取对象,但不填充参数
- Javascript填充输入,但不填充跨度
- HTML5 Canvas |换行时超过最大宽度的单词不带连字符
- Javascript将单词(不是单词的一部分)替换为西里尔字母
- Javascript regexp:如何查找不以特定单词(不是单个字母)结尾的字符串
- 谷歌地图不填充模式弹出
- Jquery转换为单词不能正常工作
- 如果选择快速,Ajax不填充下拉框
- 流星-不填充{{each}},即使控制台说数据在那里
- Javascript Regex反向引用不填充所有捕获组
- 反向单词(不是字母)字符串不使用.reverse()
- 引导多选不填充
- Javascript方法不填充方法(数组)
- 如何匹配整个单词,而每个单词不区分大小写没有RegexOptions.IgnoreCase