Question

我正在建立这个作为在线学生的自我检查。真正的内容是订购历史事件。

现在我有一个随机化的有序列表，然后变成一个可排序的列表。我甚至设置它，以便当任何项目被删除时，它会检查整个事物的顺序是否正确。见jsfiddle：

    var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}
var correctOrder = ["one", "two", "three", "four", "five", "six"];
$("#sortable").sortable({
    stop: function (event, ui) {
        console.log("item dropped");
        var order = $(this).sortable('toArray');
        console.log(order);
        for (i = 0; i < correctOrder.length; i++) {
            if (correctOrder[i] == order[i]) {
                console.log(i + " correct!");
            } else {
                console.log(i + " incorrect!");
                break;
            }
        }
    }
});
$("#sortable").disableSelection();

接下来需要做的是检查最后一个丢弃的项目是否在正确的位置。我不知道从哪里开始，除此之外我知道它属于停止功能。我不确定使用我的数组是否更好，并询问丢弃的项目是否与correctOrder数组处于相同的位置..或其他一些方法。说实话，我不确定如何获得该项目的数组位置。

任何帮助或指示表示赞赏！

Answer 1

您可以使用ui.item.index()删除索引。

＆＃13;

$(document).ready(function () {
    var ul = document.querySelector('ul');
    for (var i = ul.children.length; i >= 0; i--) {
        ul.appendChild(ul.children[Math.random() * i | 0]);
    }
    var correctOrder = ["one", "two", "three", "four", "five", "six"];
    $("#sortable").sortable({
        stop: function (event, ui) {
            console.log("item dropped");
            var order = $(this).sortable('toArray');

            var droppedIndex = ui.item.index();
            if (order[droppedIndex] === correctOrder[droppedIndex]) {
                alert('Correct!');
            } else {
               alert('Incorrect.');
            }
                
            for (i = 0; i < correctOrder.length; i++) {
                if (correctOrder[i] === order[i]) {
                    console.log(i + " correct!");
                } else {
                    console.log(i + " incorrect!");
                    break;
                }
            }
        }
    });
    $("#sortable").disableSelection();
});

＆＃13;

 ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     margin-bottom: 10px;
 }
 li {
     margin: 5px;
     padding: 5px;
     width: 150px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<ul id="sortable">
    <li class="ui-state-default" id="one">1</li>
    <li class="ui-state-default" id="two">2</li>
    <li class="ui-state-default" id="three">3</li>
    <li class="ui-state-default" id="four">4</li>
    <li class="ui-state-default" id="five">5</li>
    <li class="ui-state-default" id="six">6</li>
</ul>

＆＃13;

随机化jQuery.sortable，在正确的位置删除项目？

1 个答案: