时间戳

首页 > 解决方案 > 如何在 JavaScript 中随机打乱列表项

javascript - 如何在 JavaScript 中随机打乱列表项

问题描述

我试图做一个单词填充测验，但被困在两者之间：

  1. 希望随机打乱列表项

  2. 如果猜测是正确的，那么如何进入下一个空白

    提琴手

$(".btn-container li").click(function () {
  let val = $(this).text();
  $(".blank:empty:first").html(val);
  var optionIndex = $(this).index();
  if (optionIndex === blankIndex) {
    $(this).prop("disabled", true).addClass('disable');
    console.log('right');
  } else {
    console.log('wrong');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-container">
        <p>The bluebird <span class="blank"></span> the <span class="blank"></span> on his <span class="blank"></span></p>
     </div>
    
<div class="btn-container">
  <ul id="my_div">
    <li><a href="#">carries</a></li>
    <li><a href="#">sky</a></li>
    <li><a href="#">back</a></li>
   </ul>
</div>

标签： javascripthtml

解决方案

在这里我发现了简单的逻辑https://stackoverflow.com/a/11972692/6631280

var ul = document.querySelector('#my_div');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}
<div class="content-container">
        <p>The bluebird <span class="blank"></span> the <span class="blank"></span> on his <span class="blank"></span></p>
     </div>

    <div class="btn-container">
       <ul id="my_div">
          <li><a href="#">carries</a></li>
          <li><a href="#">sky</a></li>
          <li><a href="#">back</a></li>
       </ul>
    </div>

推荐阅读