Сравните два массива и покажите ложные индексы в JS - PullRequest
Новая
       46

Сравните два массива и покажите ложные индексы в JS

1 голос
/ 27 октября 2019

Я пишу аналогичный алгоритм игры с сортируемой функцией jQuery. Я закодировал некоторые части. Я упорядочиваю список и сравниваю два массива. Если человек может сделать истинный порядок (так Алгоритм, если истина), программа показывает сообщение. СЕЙЧАС , мне нужно, если упорядочение списка и мой алгоритм упорядочения true (сравнение), истинные тексты элементов списка превращаются в ЗЕЛЕНЫЙ , если 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>

1 Ответ

0 голосов
/ 27 октября 2019

Вы можете удалить проверку прямого массива и сделать что-то вроде этого 

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