我想制作可排序的拖放列表，并在按钮上 - 将其与实际正确的顺序进行比较（将其想象为完成任务 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
TA贡献1876条经验 获得超5个赞
如果给定位置的值相同，您可以比较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>
添加回答
举报
0/150
提交
取消