0

您好，只是在寻找一些关于在 HTML5/JQuery 中进行排序/排序测验的有用建议。只是想在页面上呈现一组以随机顺序排列的步骤，用户必须对它们进行排序以做出正确的顺序。我设法找到了一个使用 jquery 库和 jquery-ui-1.8.5.custom.min.js 文件并在页面上调用以下 javascript 的示例“某处”：

    <script type="text/javascript" src="../scripts/jquery-1.4.3.min.js"></script> 
    <script type="text/javascript" src="../scripts/jquery-ui-1.8.5.custom.min.js"> </script>
  <script type="text/javascript">
    var correctOrder = new Array();
    var liItems = new Array();
    $(function() {
      $("#sortable").sortable({placeholder: 'ui-state-highlight'});
      $("#sortable").disableSelection();
      var ul = document.getElementById('sortable');
      var li = ul.getElementsByTagName("li");
      for(var i = 0; i < li.length; i++){
        correctOrder.push(li[i].innerHTML);
        liItems.push(li[i]);
      }
    });
    (function($){
      $.fn.shuffle = function() {
        return this.each(function(){
          var items = $(this).children();
          return (items.length)
            ? $(this).html($.shuffle(items))
            : this;
        });
      }
      $.shuffle = function(arr) {
        for(
          var j, x, i = arr.length; i;
          j = parseInt(Math.random() * i),
          x = arr[--i], arr[i] = arr[j], arr[j] = x
        );
        return arr;
      }
    })(jQuery);
    function resetForm(){
      $('#sortable').shuffle();
      for(var i = 0;i < liItems.length; i++){
        liItems[i].className = "";
      }
    }
    function checkForm(){
      var ul = document.getElementById('sortable');
      var li = ul.getElementsByTagName("li");
      for(var i = 0;i < li.length; i++){
        if(li[i].innerHTML != correctOrder[i]){
          li[i].className = "incorrect";
        }else{
          li[i].className = "correct";
        }
      }
    }
  </script>

这段代码似乎工作正常，但没有成功随机化列表项的顺序（body html 只是 div，其中包含无序类，id 为“可排序”。我试图将重置函数放入初始化代码中，但这只是随机化顺序和答案，这绝对是我不想要的。只需当用户转到页面并单击“提交”时 - 所有答案都是正确的，因为它没有随机化列表项。

希望这是有道理的，我在 JS 方面有点菜鸟，我真的想摆脱 Flash 和 ActionScript，因为它有其局限性。

谢谢

4

2 回答 2

1

也许在你的 for 循环中改变 statement2 会解决这个问题。

for(statement1;statement2;statement3){
   //loop
}
于 2013-01-24T07:31:58.710 回答
0

试试这个洗牌：

演示： http: //jsbin.com/ibebav/1/edit (ctrl + enter 刷新)

(function($) {

  function _range(min, max, rand) {
    var arr = (new Array(++max - min))
      .join('.').split('.')
      .map(function(v, i){ return min + i; });
    return rand ?
      arr.map(function(v) { return [Math.random(), v]; })
         .sort().map(function(v) { return v[1]; }) :
      arr;
  }

  $.fn.shuffle = function() {
    return this.each(function() {
      var $this = $(this)
        , children = $this.children()
        , rand = _range(0, children.length-1, true).map(function(el) {
            return children[el];
          });
      if (children.length) $(rand).appendTo($this);
    });
  };

}(jQuery));

这应该让你接近你的目标。另外我建议如果你使用 jQuery 然后充分使用它，不要将常规 DOM 和 jQuery 混合使用，否则会让人感到困惑。

于 2013-01-24T07:05:42.447 回答