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

debugcn 发表于 Dev

诗人

我正在用jQuery可排序功能编写类似的算法游戏。我已经编码了一些部分。我正在排序列表并比较两个数组。如果某人可以执行真实的命令（如果是，则为Algorithm）程序显示一条消息。现在，如果列表排序和我的算法排序顺序为true（比较），则我需要，true列表项文本变为GREEN，如果false变为RED。我的代码：

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

阿比托·普拉卡什（Abito Prakash）

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

  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'，则清空父对象并再次随机化。

  $(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 = '';
      }
    }
  });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。