比较两个数组并在 JS 中显示错误索引

Question

我正在用 jQuery 可排序函数编写类似的算法游戏。我已经编码了一些部分。我正在订购列表并比较两个数组。如果人可以执行真正的命令（那么算法如果为真）则显示消息的程序。 NOW，我需要如果列表排序和我的算法排序为真（比较），真列表项文本变为 GREEN，如果为假则变为红色。我的代码：

  //pageonload mix ordering
  $(document).ready(function() {

    var parent = $("#algoritma");
    var divs = parent.children();
    while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }

  });

  //when list ordering update
  jQuery(function($) {
    $('.algList').sortable({
      connectWith: '.algList',
      update: function(event, ui) {
        var liste = this.id;
        var order = $(this).sortable('toArray');
        var sira = order.join(';');
        var trueOrder = ["1", "2", "3", "4"];
        var trueSira = trueOrder.join(';');
        console.log(order);
        console.log(trueOrder);

        //compare arrays
        if (JSON.stringify(order) === JSON.stringify(trueOrder)) {
          console.log('They are equal! Congratulations');
        } else {
        
          //i need this part. if two array not equal ordering, true list texts turn to GREEN color and false list texts turn RED color 
          
        }


      }
    });
  });

  body {
    margin: auto;
    width: 600px;
  }

  #algoritma {
    font-size: 24px;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    border: 1px solid #ccc;
    line-height: 35px;
  }

  li {
    list-style-type: decimal;
    border: 1px solid red;
  }

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  
  <ul id="algoritma" class="algList">
    <li id="1">Step #1</li>
    <li id="2">Step #2</li>
    <li id="3">Step #3</li>
    <li id="4">Step #4</li>
  </ul>

Answer 1

您可以删除直接数组等于检查并执行类似的操作

  jQuery(function($) {
    $('.algList').sortable({
      connectWith: '.algList',
      update: function(event, ui) {
        var liste = this.id;
        var order = $(this).sortable('toArray');
        var sira = order.join(';');
        var trueOrder = ["1", "2", "3", "4"];
        var trueSira = trueOrder.join(';');
        console.log(order);
        console.log(trueOrder);

        //compare arrays
        for (let i=0; i < order.length; i++) {
            if (trueOrder[i] === order[i]) {
                document.getElementById(i+1).style.color = 'green';
            } else {
                document.getElementById(i+1).style.color = 'red';
            }
        }

      }
    });
  });

同时为了避免初始顺序不正确的情况，我们可以这样做。创建一个仅存储订单的新字符串。如果这个字符串的值为'1234'，那么清空parent，重新随机化

  $(document).ready(function() {
    let parent = $("#algoritma");
    let divs = parent.children();
    let randomOrder = '';
    while (divs.length) {
      const randomDiv = divs.splice(Math.floor(Math.random() * divs.length), 1)[0];
      randomOrder += randomDiv.id;
      parent.append(randomDiv);
      if (randomOrder === '1234') {
        divs = parent.children();
        parent.empty();
        randomOrder = '';
      }
    }
  });

比较两个数组并在 JS 中显示错误索引

Compare Two Arrays and Show False Indexes in JS

javascript

jquery

arrays

compare

jquery-ui-sortable