可排序列表 - 与正确的顺序进行比较并将类添加到正确的位置
我想制作可排序的拖放列表，并在按钮上 - 将其与实际正确的顺序进行比较（将其想象为完成任务 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 列表并检查一切是否到位的部分。我还想要的是：
如果整体顺序错误，我想将 addClass("ui-state- Correct") 添加到正确排序的元素中。就像正确的顺序显然是 1,2,3 并且如果用户单击按钮并且他的顺序是 1,3,2 - 我想将类“ui-state- Correct”添加到 id dd01 的元素中。
否则 - 由于用户可以多次检查订单，如果他弄乱了正确的答案，我想取消“ui-state- Correct”课程:)
https://jsfiddle.net/mjro3vba/3/ 为了方便起见:)
翻阅古今1回答
-
慕运维8079593
如果给定位置的值相同，您可以比较items数组和数组值，只需将类添加到您的ie 中：并且您可以在排序再次开始时删除添加的这些类。itsortli$("#" + 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>
随时随地看视频慕课网APP
相关分类
JavaScript