可排序列表 - 与正确的顺序进行比较并将类添加到正确的位置答案

【问题标题】：Sortable list - compare with correct order and add a class to correct position可排序列表 - 与正确的顺序进行比较并将类添加到正确的位置
【发布时间】：2020-12-07 10:26:38
【问题描述】：

我想制作可排序的拖放列表，并在按钮上 - 将其与实际正确的顺序进行比较（将其想象为完成任务 X 所需的步骤）。我使用列表 ID 来做到这一点（对我来说最简单的方法）。

$(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&D 列表并检查是否一切就绪。我还想要的是：

如果整体顺序是错误的，我想在正确排序的元素中添加Class("ui-state-correct")。就像正确的顺序显然是 1,2,3 并且如果用户单击按钮并且他的顺序是 1,3,2 - 我想将类“ui-state-correct”添加到 id 为 dd01 的元素。
否则 - 由于用户可以多次检查订单，如果他弄乱了正确答案，我想取消“ui-state-correct”课程:)

https://jsfiddle.net/mjro3vba/3/ 为方便起见：）

【问题讨论】：

标签： javascript jquery jquery-ui-sortable

【解决方案1】：

如果给定位置的值相同，您可以比较 items 数组和 itsort 数组值，只需将类添加到您的 li 即：$("#" + 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>

【讨论】：

您好@Swati，感谢您的回复:) 看来您的方法确实有效。它几乎完全符合我的要求:) 我想只有在拖动项目的位置发生变化时才删除类有点复杂？
也许当您需要删除该类时？让我知道我会更新我的答案。
好的，所以我认为可能在 checkOrd() 之后，正确的“答案”变为绿色，并且当您再次拖动不正确的答案并且不触摸正确答案的顺序时（例如 1， 2, 6,7 是正确的，5,3,4 是错误的）正确的保持绿色。就像我用 5 换 3，然后用 5 换 4 - 我没有碰过正确的。他们能保持绿色吗？
有stop event，你可以在这个方法里面写这个逻辑，你自己试试，如果还是不行，告诉我。