javascript - Jquery 排序并给出正确或错误的消息

Question

我有一个可排序的列表项。

<div id="reImbursement_msg" style="display: none;"></div>
<div>
    <ul class="sortable reImbursementdiv  cur">
        <li id="sort_five">alpha</li>
        <li id="sort_one">beta</li>
        <li id="sort_four">gamma</li>
        <li id="sort_three">thita</li>
        <li id="sort_two">pie</li>
    </ul>
</div>

现在我想要的是每当用户进行排序时显示一条消息。这里我试图比较两个数组。即使数组匹配，它也只会显示一条消息“顺序不正确”。

var correctOrder = ["sort_one", "sort_two", "sort_three", "sort_four", "sort_five"];
var userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
    return i.id
});

function arraysEqual(arr1, arr2) {
    if (arr1.length !== arr2.length)
        return false;
    for (var i = arr1.length; i--;) {
        if (arr1[i] !== arr2[i])
            return false;
    }

    return true;
}


$(".sortable").sortable({
    update: function(event, ui) {

        if (arraysEqual(correctOrder, userOrder) == true) {
                showMsg("reImbursement_msg", "Correct Order", "success");

        } else {
            showMsg("reImbursement_msg", "Incorrect Order", "danger");
            console.log($(".sortable.reImbursementdiv li").toArray().map(function(i) {
                return i.id
            }));
        }


        return true;
    }
}).disableSelection();

function showMsg(box, msg, msgStatus) {
    $("#" + box)
            .removeClass()
            .show()
            .addClass("alert alert-" + msgStatus)
            .html(msg);
}

我根据要求创建了一支笔。

Codepen link demo

Answer 1

在您的示例中，您从不更新userOrder，因此正在比较的顺序永远不会改变。请查看:

$(function() {
  var correctOrder = ["sort_one", "sort_two", "sort_three", "sort_four", "sort_five"];
  var userOrder = [];

  function arraysEqual(arr1, arr2) {
    var result = true;
    if (arr1.length === arr2.length) {
      $.each(arr1, function(key, val) {
        result = result && (arr1[key] === arr2[key]);
      });
    } else {
      result = false;
    }
    console.log(arr1, arr2, result);
    return result;
  }

  function showMsg(box, msg, msgStatus) {
    $(box)
      .removeClass()
      .show()
      .addClass("alert alert-" + msgStatus)
      .html(msg);
  }

  $(".sortable").sortable({
    update: function(event, ui) {
      userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
        return i.id
      });
      if (arraysEqual(correctOrder, userOrder)) {
        showMsg("#reImbursement_msg", "Correct Order", "success");
      } else {
        showMsg("#reImbursement_msg", "Incorrect Order", "danger");
        console.log($(".sortable.reImbursementdiv li").toArray().map(function(i) {
          return i.id
        }));
      }
      return true;
    }
  }).disableSelection();

  userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
    return i.id
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="reImbursement_msg" style="display: none;"></div>
<div>
  <ul class="sortable reImbursementdiv cur">
    <li id="sort_five">five</li>
    <li id="sort_one">one</li>
    <li id="sort_four">four</li>
    <li id="sort_three">three</li>
    <li id="sort_two">two</li>
  </ul>
</div>

您还必须注意操作顺序。

希望有帮助。