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

Question

我想制作可排序的拖放列表，并在按钮上 - 将其与实际正确的顺序进行比较（将其想象成完成任务 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 - 我想添加 class "ui-state-correct" 到元素id dd01.
否则 - 由于用户可以多次检查订单，如果他弄错了正确答案，我想取消 class“ui-state-correct”:)

https://jsfiddle.net/mjro3vba/3/ fiddle 为了方便 :)

Answer 1

您可以比较 items 数组和 itsort 数组值，如果给定位置的值相同，只需将 class 添加到您的 li 即：$("#" + value).addClass("ui-state-correct") 并且您可以删除这些 class 每次重新开始排序时添加的内容。

演示代码 :

$(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>

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

Sortable list - compare with correct order and add a class to correct position

javascript

jquery

jquery-ui-sortable