JQuery Uspořádat a dát zprávy správné nebo nesprávné

hlasů
0

Mám položku seznamu, který je sortable.

<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>

Teď chci, je zobrazit zprávu, kdykoliv uživatelům udělal jakousi. Zde se snažím porovnat dvě pole. To jen ukazuje zprávu jako „nesprávné pořadí“, iv případě, že pole je odpovídající.

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);
}

Vytvořil jsem pero dle přání.

link demo Codepen

Položena 27/11/2018 v 18:00
zdroj uživatelem
V jiných jazycích...                            


2 odpovědí

hlasů
1

Ve Vašem příkladu, nikdy aktualizovat userOrdertakže pořadí, která je ve srovnání, se nikdy nemění. Zkontrolujte prosím:

$(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>

Také je nutné dbát na pořadí operací.

Naděje, která pomáhá.

Odpovězeno 27/11/2018 v 18:43
zdroj uživatelem

hlasů
0

Zdá se, že jsem vynechal poslední objednávky od uživatele po třídění je hotovo.

$(".sortable").sortable({
  update: function(event, ui) {
  var userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
      return i.id
  });
      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();
Odpovězeno 27/11/2018 v 18:40
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more