Блог

Главная - Вопросы по программированию - Сортируемый список — сравните с правильным порядком и добавьте класс в правильное положение

Сортируемый список — сравните с правильным порядком и добавьте класс в правильное положение

#javascript #jquery #jquery-ui-sortable

#javascript #jquery #jquery-ui-сортируемый

Вопрос:

Я хотел создать сортируемый список перетаскивания и по кнопке — сравните его с фактически правильным порядком (представьте это как шаги, которые вам нужно предпринять, чтобы завершить задачу X). Для этого я использовал идентификаторы списков (самый простой подход для меня).

 $(function() {
  $("#sortable").sortable({
    scroll: false,
    placeholder: "ui-state-highlight"
  });
  $("#sortable").disableSelection();
});

function checkOrd() {
  var items = $('#sortable li').map(function() {
    return $.trim($(this).attr('id'));
  }).get();
  var itsort = $('#sortable li').map(function() {
    return $.trim($(this).attr('id'));
  }).get();
  console.log(items);
  console.log(itsort);
  itsort.sort();
  if (JSON.stringify(items) == JSON.stringify(itsort)) {
    console.log('good!');
  } else {
    console.log('wrong!');
  }
}; 
 .ui-state-correct {
  font-weight: bold;
  color: #8bd333;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable">
  <li id="dd01" class="ui-state-default">1.</li>
  <li id="dd02" class="ui-state-default">2.</li>
  <li id="dd03" class="ui-state-default">3.</li>
  <li id="dd04" class="ui-state-default">4.</li>
  <li id="dd05" class="ui-state-default">5.</li>
  <li id="dd06" class="ui-state-default">6.</li>
  <li id="dd07" class="ui-state-default">7.</li>
</ul>
<p class="check">
</p>
<button onclick="checkOrd();">check</button>

Итак, как вы можете видеть, я получил часть, выполнив список D amp; D и проверив, все ли на месте. Чего я также хочу, так это:

  1. Если общий порядок неправильный, я бы хотел добавить class(«ui-state-correct») к правильно упорядоченным элементам. Например, правильный порядок, очевидно, равен 1,2,3, и если пользователь нажимает кнопку, а его порядок равен 1,3,2 — я бы хотел добавить класс «ui-state-correct» к элементу с идентификатором dd01.
  2. В противном случае — поскольку пользователь может проверять порядок несколько раз, я бы хотел удалить класс «ui-state-correct», если он ошибается с правильным ответом 🙂

https://jsfiddle.net/mjro3vba/3 / скрипка для удобства 🙂

Ответ №1:

Вы можете сравнивать items значения массива и itsort массива, если значение одинаково в данной позиции, просто добавьте class к своему li i.e: $("#" value).addClass("ui-state-correct") и вы можете удалять эти добавленные классы всякий раз, когда сортировка начинается снова.

Демонстрационный код :

 $(function() {
  $("#sortable").sortable({
    scroll: false,
    placeholder: "ui-state-highlight",
    start: function(event, ui) {
      //remove class whenever sortable start again
      $("#sortable li").removeClass("ui-state-correct")
    }
  });
  $("#sortable").disableSelection();
});

function checkOrd() {
  var items = $('#sortable li').map(function() {
    return $.trim($(this).attr('id'));
  }).get();
  var itsort = $('#sortable li').map(function() {
    return $.trim($(this).attr('id'));
  }).get();
  itsort.sort();
  //loop through array
  $(items).each(function(index, value) {
    //check if both array have same at given position
    if (value == itsort[index]) {
      //add class there
      $("#"   value).addClass("ui-state-correct")
    }

  })

  if (JSON.stringify(items) == JSON.stringify(itsort)) {
    console.log('good!');
    $(".check").text("good");
  } else {
    console.log('wrong!');
    $(".check").text("wrong");
  }
}; 
 .ui-state-correct {
  color: green;
} 
 <head>

  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<ul id="sortable">
  <li id="dd01" class="ui-state-default">1.</li>
  <li id="dd02" class="ui-state-default">2.</li>
  <li id="dd03" class="ui-state-default">3.</li>
  <li id="dd04" class="ui-state-default">4.</li>
  <li id="dd05" class="ui-state-default">5.</li>
  <li id="dd06" class="ui-state-default">6.</li>
  <li id="dd07" class="ui-state-default">7.</li>
</ul>
<p class="check">
</p>
<button onclick="checkOrd();">check</button>

Комментарии:

1. Привет, @Swati, спасибо за ваш ответ 🙂 Кажется, что ваш подход выполняет свою работу. Это делает почти именно то, что я хочу 🙂 Я предполагаю, что удаление класса только при изменении положения элемента перетаскивания немного сложно?

2. Может быть, так, когда вам нужно удалить этот класс? Дайте мне знать, что тогда я обновлю свой ответ.

3. Хорошо, поэтому я думаю, что, возможно, возможно, что после проверки () правильные «ответы» становятся зелеными, и когда вы снова перетаскиваете неправильный ответ и не касаетесь порядка правильного ответа (например, 1,2, 6,7 правильные и 5,3,4 неправильные), правильные остаются зелеными. Например, я меняю 3 на 5, а затем 4 на 5 — я не трогал правильные. Могут ли они оставаться зелеными?

4. Есть событие остановки , вы можете написать эту логику внутри этого метода, попробуйте сами, если все еще это не работает, дайте мне знать.