比较两个数组并在JS中显示假索引

Question

我正在用jQuery可排序函数编写一个类似的算法游戏。我已经对一些部分进行了编码。我正在排序列表并比较两个数组。如果人可以做真序(所以算法如果真序(程序显示一条消息。NOW，我需要如果列表排序和我的算法排序为true(比较(，则true列表项文本将变为GREEN；如果为false，则变为RED。我的代码：

//pageonload mix ordering
$(document).ready(function() {
var parent = $("#algoritma");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
//when list ordering update
jQuery(function($) {
$('.algList').sortable({
connectWith: '.algList',
update: function(event, ui) {
var liste = this.id;
var order = $(this).sortable('toArray');
var sira = order.join(';');
var trueOrder = ["1", "2", "3", "4"];
var trueSira = trueOrder.join(';');
console.log(order);
console.log(trueOrder);
//compare arrays
if (JSON.stringify(order) === JSON.stringify(trueOrder)) {
console.log('They are equal! Congratulations');
} else {

//i need this part. if two array not equal ordering, true list texts turn to GREEN color and false list texts turn RED color 

}
}
});
});

body {
margin: auto;
width: 600px;
}
#algoritma {
font-size: 24px;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
border: 1px solid #ccc;
line-height: 35px;
}
li {
list-style-type: decimal;
border: 1px solid red;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<ul id="algoritma" class="algList">
<li id="1">Step #1</li>
<li id="2">Step #2</li>
<li id="3">Step #3</li>
<li id="4">Step #4</li>
</ul>

Answer 1

您可以删除直接数组等于检查，并执行类似的操作

jQuery(function($) {
$('.algList').sortable({
connectWith: '.algList',
update: function(event, ui) {
var liste = this.id;
var order = $(this).sortable('toArray');
var sira = order.join(';');
var trueOrder = ["1", "2", "3", "4"];
var trueSira = trueOrder.join(';');
console.log(order);
console.log(trueOrder);
//compare arrays
for (let i=0; i < order.length; i++) {
if (trueOrder[i] === order[i]) {
document.getElementById(i+1).style.color = 'green';
} else {
document.getElementById(i+1).style.color = 'red';
}
}
}
});
});

为了避免初始顺序不正确的情况，我们可以这样做。制作一个新的字符串来存储订单。如果此字符串的值为'1234'，则清空父字符串并再次随机化。

$(document).ready(function() {
let parent = $("#algoritma");
let divs = parent.children();
let randomOrder = '';
while (divs.length) {
const randomDiv = divs.splice(Math.floor(Math.random() * divs.length), 1)[0];
randomOrder += randomDiv.id;
parent.append(randomDiv);
if (randomOrder === '1234') {
divs = parent.children();
parent.empty();
randomOrder = '';
}
}
});