如何随机从数组中获取随机字符串项，并将字符串单词的每个字符随机放入li标签中

Question

我正在努力准备一个词汇练习练习。在本练习中，单词的字母分隔在li标签中，下面有一个答案按钮，用于显示字母的正确顺序。在这里你可以看到一个“兔子”字是如何问的。

<div>
<div id="container4" class="orderD">
   <ul  id="items4" style="margin:auto">
        <li class="list hvr">A</li>
        <li class="list hvr">I</li>
        <li class="list hvr">R</li>
        <li class="list hvr">B</li>
    <li class="list hvr">B</li>
    <li class="list hvr">T</li>
    </ul> 
</div>
</div>

<!-- display Answer section-->
<div>
<div  class="altCizgi">
  <ul style="margin:auto;margin-bottom:4px;">
    <p class="cevapsStili" id="p4">RABBIT</p>
       <div style="display:block;margin:auto;margin-bottom:4px;text-align: center;"> 
       <button class="bttnStyle" id="show4">▼ Answer</button></div>
  </ul> 
  </div>
</div>

以及在互联网上找到的现成代码的帮助下，每件事情都可以，用户可以将字母拖动到正确的顺序并查看答案。但是这些词语一直都是一样的。如何从数组中获取随机单词并将单词的每个字母随机放入li标签中。这样用户就可以在每个页面加载上练习不同的单词。我已经找到了下面的随机单词代码，但我无法弄清楚如何将字母放入li标签。我不擅长javascript。

<script>
function getRandomSubarray(arr, size) 
{
var shuffled = arr.slice(0), i = arr.length, temp, index;
while (i--) 
{
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];shuffled[i] = temp;
}
return shuffled.slice(0, size);
}
$(document).ready( function () {
var mywordsList = ["class","classroom","book","bookcase","brush","calendar","clock","crayon"]
;callwords = getRandomSubarray(mywordsList, 7);
var words = new String(callwords);
</script>

Answer 1

好的，首先我添加了JQuery，它有助于DOM操作很多（这是$符号的东西）。

之后，我得到了ul元素$("#items4");并保存到变量中。你已经有了带有单词的洗牌数组。所以我把列表中的第一个Word变成了一个数组（var word = callwords[0].split("");）并再次调用了shuffle函数来对字符进行网格化：var shuffledWord = getRandomSubarray(word, word.length);。并将解决方案更改为word，$("#p4").html(word)

在此之后你很容易清空你的无序列表ul.empty();，然后将所有的li一个一个地添加到其中。 shuffledWord.forEach(function(char){ ul.append('<li class="list hvr">'+ char +'</li>') });通过迭代洗牌的词。

function getRandomSubarray(arr, size) 
{
   var shuffled = arr.slice(0), i = arr.length, temp, index;
   while (i--) 
   {
      index = Math.floor(parseInt((i + 1) * Math.random()));
      temp = shuffled[index];
      shuffled[index] = shuffled[i];shuffled[i] = temp;
   }
   return shuffled.slice(0, size);
}

var mywordsList = ["class","classroom","book","bookcase","brush","calendar","clock","crayon"];
callwords = getRandomSubarray(mywordsList, mywordsList.length);

var word = callwords[0].split("");
$("#p4").html(word)
var shuffledWord = getRandomSubarray(word, word.length);

var ul = $("#items4");
ul.empty();
shuffledWord.forEach(function(char){
   ul.append('<li class="list hvr">'+ char +'</li>')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="container4" class="orderD">
   <ul  id="items4" style="margin:auto">
        <li class="list hvr">A</li>
        <li class="list hvr">I</li>
        <li class="list hvr">R</li>
        <li class="list hvr">B</li>
    <li class="list hvr">B</li>
    <li class="list hvr">T</li>
    </ul> 
</div>
</div>

<!-- display Answer section-->
<div>
<div  class="altCizgi">
  <ul style="margin:auto;margin-bottom:4px;">
    <p class="cevapsStili" id="p4">RABBIT</p>
       <div style="display:block;margin:auto;margin-bottom:4px;text-align: center;"> 
       <button class="bttnStyle" id="show4">▼ Answer</button></div>
  </ul> 
  </div>
</div>

如果你在代码callwords = getRandomSubarray(mywordsList, 7)中看到这个，那么作为未来的旁注，不要这样做，因为如果你改变你的mywordsList，例如通过再添加一个单词，你总是要通过计算值来改变函数调用。我在我的例子中纠正了这一点。只做callwords = getRandomSubarray(mywordsList, mywordsList.length)，你再也不用考虑了:)。