让循环工作在我的脚本

Question

我基本上想要这个循环在我正在开发的网格中产生随机空间，但无法让它在我的脚本中工作。

我有正确的循环我不能让它

我刚才编辑我的脚本的其余部分工作，它仍然无法正常工作，任何其他的想法？

var listOfWords = {}; 

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

var i; 
for(i = 0; i < ul.children.length; ++i){ 
    listOfWords[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 = new Array(); 

     for(var x = 0; x < 6; x++) 
    { 
     var rand = Math.floor(Math.random() * (listOfWords.length+1)); 
     chosenWords.push(listOfWords[rand]); 
     if (chosenWords.length < 12){ 
        chosenWords.push(' '); 
      } 

    } 

var shuffledWords = Object.keys(listOfWords).slice(0).sort(function() { 
    return 0.5 - Math.random(); 
}).slice(0, 6); 
var guesses = {}; 
console.log(shuffledWords); 
var tbl = document.createElement('table'); 
tbl.className = 'tablestyle'; 
var wordsPerRow = 2; 

for (var i = 0; i < Object.keys(shuffledWords).length - 1; 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]; 

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

document.body.appendChild(tbl); 

感谢

Answer 1

希望这有助于你：

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); 
} 

console.log(listOfWords); 

var chosenWords = []; 
var cpy_list = listOfWords.slice(); 

     for(var x = 0; x < 6; x++) 
    { 
     var rand = Math.floor(Math.random() * (cpy_list.length)); 
     console.log('push ' + cpy_list[rand].name); 
     chosenWords.push(cpy_list[rand].name); 
     cpy_list.splice(rand,1); 
     console.log(cpy_list); 
     if (chosenWords.length < 12){ 
      console.log('make a blanck'); 
        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); 

$('#pickNext').click(function() { 
    // remove the class from all td's 
    $('td').removeClass('spellword'); 
    // pick a random word 
    rndWord = Math.floor(Math.random() * (listOfWords.length)); 
    // apply class to all cells containing a letter from that word 
    $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword'); 
}); 



$('.drag').draggable({ 

    helper: 'clone', 
    snap: '.drop', 
    grid: [60, 60], 
    revert: 'invalid', 
    snapMode: 'corner' 
}); 


$('.drop').droppable ({ 
    drop: function(event, ui) { 
     word = $(this).data('word'); 

     guesses[word].push($(ui.draggable).attr('data-letter')); 
     console.log($(event)); 
     console.log($(ui.draggable).text()); 

     console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim()); 


     if ($(this).text() == $(ui.draggable).text().trim()) { 

      $(this).addClass('wordglow3'); 
     } else { 
      $(this).addClass('wordglow'); 
     } 
     console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim()); 


     console.log(guesses); 

     if (guesses[word].length == 3) { 
      if (guesses[word].join('') == word) { 
       $('td[data-word=' + word + ']').addClass('wordglow2'); 

      } else { 
       $('td[data-word=' + word + ']').addClass("wordglow4"); 
       guesses[word].splice(0, guesses[word].length); 
      } 
     } 






    }, 


    activate: function(event, ui) { 
     word = $(this).data('word'); 

     // try to remove the class 
     $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3'); 
    } 


}); 

$(".minibutton").hover(function(){ 
     $(this).css("text-decoration", "underline"); 
    },function(){ 
     $(this).css("text-decoration", "none"); 
    } 
); 


$(".minibutton2").hover(function(){ 
     $(this).css("text-decoration", "underline"); 
    },function(){ 
     $(this).css("text-decoration", "none"); 
    } 
); 


var audio = $("#mysoundclip")[0]; 
$("button").click(function() { 
    var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2'); 
    if (noExist) { 
     $('#pickNext').click(); 
    } else { 

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

var audio = $("#mysoundclip")[0]; 
$("button2").click(function() { 
    var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2'); 
    if (noExist) { 
     $('#pickNext').click(); 
    } else { 

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

var pic = $("#mypic")[0]; 
$("button").click(function() { 
    var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2'); 
    if (noExist) { 
     $('#pickNext').click(); 
    } else { 

     pic = $("#mypic").attr('src', listOfWords[rndWord].pic); 
     pic.show(); 
    } 
}); 


function keys(obj) { 
    var keys = []; 
    for (var key in obj) { 
     if (obj.hasOwnProperty(key)) { 
      keys.push(key); 
     } 
    } 
    return keys; 
} 

Answer 2

首先，你应该改变：

If(chosenWords.length < 12){ 

到：

if (chosenWords.length < 12) { 

和：

chosenWords.push(“ ”); 

至：

chosenWords.push(' '); 

并定义变量selectedWords。