Jquery Ordenar e dar a mensagem correta ou incorreta

votos
0

Eu tenho um item da lista que é classificável.

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

Agora eu quero é para exibir uma mensagem sempre que os usuários fez uma espécie. Aqui eu estou tentando comparar duas matrizes. Isso só mostra uma mensagem como Ordem incorreta mesmo que a matriz está combinando.

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

Eu criei uma caneta como pelo pedido.

Codepen ligação de demonstração

Publicado 27/11/2018 em 18:00
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

No seu exemplo, você nunca atualizar userOrderassim que a ordem, que está sendo comparado, nunca muda. Por favor revise:

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

Você também tem que estar atento a ordem das operações.

Espero que ajude.

Respondeu 27/11/2018 em 18:43
fonte usuário

votos
0

Parece que eu perdi o último fim de utilizador após a classificação é feita.

$(".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();
Respondeu 27/11/2018 em 18:40
fonte usuário

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