如何随机从数组中获取随机字符串项，并将字符串单词的每个字符随机放入li标签中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何随机从数组中获取随机字符串项，并将字符串单词的每个字符随机放入li标签中相关的知识，希望对你有一定的参考价值。
我正在努力准备一个词汇练习练习。在本练习中，单词的字母分隔在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>
好的，首先我添加了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>以上是关于如何随机从数组中获取随机字符串项，并将字符串单词的每个字符随机放入li标签中的主要内容，如果未能解决你的问题，请参考以下文章