Question

我正在创建一个拖放文字游戏。脚本的这一部分动态地从 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]);
 }
});

Answer 1

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/

Answer 2

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

$(cell).addClass(word)

然后突出显示它：

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

Answer 3

是的，您可以更改按钮的名称并使用.mousedown，更好的

$('.minibutton').mousedown(function() {
    $('td').removeClass('spellword'); 
    var randomWord = shuffledWords.sort(
        function() {
            return 0.8 - Math.random(); 
         }
     )[0]; 

     $('td[data-word="' + randomWord + '"]').addClass('spellword'); 
});

如何突出显示列表中的随机单词

3 个答案: