如何从列表中突出显示一个随机单词

How do I highlight a random word from a list

本文关键字：一个 单词 随机 显示 列表      更新时间：2023-12-16

我正在创建一个拖放文字游戏。脚本的这一部分从listOfWords中提取的12个随机单词动态创建一个表我需要用给定的CSS突出显示表中的一个单词，直到它完成，向用户显示要拼写的单词。然后，它会在表中随机选择另一个单词进行拼写，以此类推，直到所有单词都完成。。。。

我已经尝试了各种不同的方法，但无法使其工作，请帮助

var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", "pin", "gag", "sat", "pat", "tap", "sap", "tag", "gig", "gap", "nag", "sag", "gas", "pig", "dig", "got", "not", "top", "pop", "god", "mog", "cot", "cop", "cap", "cod", "kid", "kit", "get", "pet", "ten", "net", "pen", "peg", "met", "men", "mum", "run", "mug", "cup", "sun", "mud", "rim", "ram", "rat", "rip", "rag", "rug", "rot", "dad", "sad", "dim", "dip", "did", "mam", "map", "nip", "tin", "tan", "nap", "sit", "tip", "pip", "sip", "had", "him", "his", "hot", "hut", "hop", "hum", "hit", "hat", "has", "hug", "but", "big", "bet", "bad", "bad", "bed", "bud", "beg", "bug", "bun", "bus", "bat", "bit", "fit", "fin", "fun", "fig", "fan", "fat", "lap", "lot", "let", "leg", "lit"];
var guesses = {};
var shuffledWords = listOfWords.slice(0).sort(function() {
return 0.5 - Math.random();
}).slice(0, 12);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < shuffledWords.length; i += wordsPerRow) {
var row = document.createElement('tr');
for (var j = i; j < i + wordsPerRow; ++j) {
    var word = shuffledWords[j];
    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];
        // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
        row.appendChild(cell);
        }
   }
    tbl.appendChild(row);
}
document.body.appendChild(tbl);

这是我想应用于拼写所需单词的CSS。。。

.spellword {
    -webkit-box-shadow: inset 0px 0px 10px 5px #176BC9;
    box-shadow: inset 0px 0px 10px 5px #176BC9;
}

我认为这将是沿着这些路线。。。

var wordToSpell = shuffledWords.slice(0).sort(function() {
return Math.round(Math.random())-0.5
$("wordToSpell").addClass("spellword");
  }).slice(0,1);

我也试过这个，但没有快乐。。。

$(document).ready(function() {
 var wordToSpell = [
     <c:forEach var="word" items="${listOfWords}">'${word}', </c:forEach> // JSP : server-side
 ];  
 for (var i = 0; i < wordToSpell.length; i++) {
     $('td').highlight(wordToSpell[i]);
 }
});

jquery解决方案可以如下所示：

$('#pickNext').click(function(){
    // remove the class from all td's
    $('td').removeClass('spellword');
    // pick a random word
    var rndWord = shuffledWords.sort(function() {  return 0.5 - Math.random(); })[0];
    // apply class to all cells containing a letter from that word
    $('td[data-word="' + rndWord + '"]').addClass('spellword');
});

现场示例：http://jsfiddle.net/zWfm3/1/

因此，当您创建树时，您可以向每个树添加一个类，即单词：

$(cell).addClass(word)

然后突出显示：

$(word).addClass("spellword");

是的，您只需更改按钮的名称并使用.mousedown，它的更好

$('.minibutton').mousedown(function() {
    $('td').removeClass('spellword'); 
    var randomWord = shuffledWords.sort(
        function() {
            return 0.8 - Math.random(); 
         }
     )[0]; 
     $('td[data-word="' + randomWord + '"]').addClass('spellword'); 
});
相关文章：