Question

我正在为儿童制作一个网络移动应用程序来学习字母表（这是一个学校项目）。我做了一个基于jquery ui的练习。通过这个练习，孩子们可以移动切割图片。这些作品有30件，其中26件有一封信。因此，第一张图像是A而不是第二张图像......当所有图像的顺序都正确时，就形成了一张图像。我每次刷新页面时都会对它进行随机化。我想要的是，我希望当所有部分都按照正确的顺序显示消息时。这就是我的jquery代码。

$( "h1" ).click(function(){
    $( this ).slideUp();
});

$.fn.randomize = function(selector){
var $elems = selector ? $(this).find(selector) : $(this).children(),
    $parents = $elems.parent();

$parents.each(function(){
    $(this).children(selector).sort(function(){
        return Math.round(Math.random()) - 0.5;
    }).detach().appendTo(this);
});

return this;
};

$( "#sortable" ).randomize();   
$( "#sortable" ).sortable({ 
    cursor: "help" 
}); 
$( "#sortable" ).disableSelection();

那是html

        <ul id="sortable">       
        <li class="ui-state-A">A</li>   

        <li class="ui-state-B">B</li>

        <li class="ui-state-C">C</li>

        <li class="ui-state-D">D</li>

        <li class="ui-state-E">E</li>

        <li class="ui-state-F">F</li>

        <li class="ui-state-G">G</li>

        <li class="ui-state-H">H</li>

        <li class="ui-state-I">I</li>

        <li class="ui-state-J">J</li>

        <li class="ui-state-K">K</li>

        <li class="ui-state-L">L</li>

        <li class="ui-state-M">M</li>

        <li class="ui-state-N">N</li>

        <li class="ui-state-O">O</li>

        <li class="ui-state-P">P</li>

        <li class="ui-state-Q">Q</li>

        <li class="ui-state-R">R</li>

        <li class="ui-state-S">S</li>

        <li class="ui-state-T">T</li>

        <li class="ui-state-U">U</li>

        <li class="ui-state-V">V</li>

        <li class="ui-state-W">W</li>

        <li class="ui-state-X">X</li>

        <li class="ui-state-Y">Y</li>

        <li class="ui-state-Z">Z</li>

        <li class="ui-state-1">&nbsp;</li>

        <li class="ui-state-2">&nbsp;</li>

        <li class="ui-state-3">&nbsp;</li>

        <li class="ui-state-4">&nbsp;</li>        
    </ul>

感谢您的帮助！：）

Answer 1

您可以通过迭代字母表中的所有字母（使用字符代码）在可排序插件的update回调上实现它：

$('#sortable').sortable({
        update: function(event, ui) {

            var positions = []; 

            // we iterate through alphabet from letter A
            var current_letter_code = 65;

            // loop through all the items
            $('#sortable li').each( function(e) {

                if(String.fromCharCode(current_letter_code) == $(this).text()){

                    current_letter_code++;

                    // if we finished all the letters, show alert
                    if(current_letter_code == 91){
                        alert('the letters are in the right order');
                    }
                } else {
                    // break the loop
                    return false;
                }
            });
    }
});

此代码要求li上的第一个元素为A并继续Z，而中间没有任何 。

另一种方法是使用start和update回调来保存字母更改时的位置，并检查字母是否处于正确状态（字母的所有位置都是正确的）。一个有用的链接是this。

当所有部分的顺序正确时，如何显示消息？

1 个答案: