Question

我正在使用jQuery来允许两个列表之间的拖放，而我没有得到我期望的行为。

每个列表分为两对，其中包含teams_in_set<set-number>和teams_not_in_set<set-number>，即类connected-sortable的所有成员。页面上将有任意数量的这些配对，末尾的设置数字为0，表示正在创建的新设置（与正在编辑的现有设置相对）。

我正在使用$(document).ready中的以下功能进行设置：


    var teams_in_set_pattern = /^teams_in_set(\d*)$/;
    $(function() {
        var connected_list = $(".connected-sortable");
        for (var i = 0; i < connected_list.length; i++) {
            var id = connected_list[i].id;
            if (teams_in_set_pattern.test(id)) {
                var set_num = id.match(teams_in_set_pattern)[1];
                var teams_in = "#teams_in_set" + set_num;
                var teams_out = "#teams_not_in_set" + set_num;

                if (set_num > 0) {
                    $(teams_in + ", " + teams_out).sortable({
                        revert: true,
                        connectWith: ".connected-sortable", 
                        cursor: 'move', 
                        receive: function(event, ui) {
                            update_teams(set_num);
                        } 
                    }).disableSelection();
                }
                else {
                    $(teams_in + ", " + teams_out).sortable({
                        revert: true,
                        connectWith: ".connected-sortable", 
                        cursor: 'move', 
                    }).disableSelection();
                }
            }
        }
    });

这个想法是当团队从一个列表移动到另一个列表时，调用update_teams(set_num);行，触发一些更新数据库的Ajax。问题是变量set_num;似乎不是保留填充receive:时的值，而是保留它最后设置的值，它总是变为0。

我误解了什么？我需要做些什么来获得我想要的行为？

Answer 1

这是异步Javascript中的常见问题。当update_teams运行时，循环已经运行。

查看类似问题：JavaScript closure inside loops – simple practical example

我通常会将问题代码移到自己的函数中，例如

function doIt(teams_in, teams_out, set_num) {
   if (set_num > 0) {
                $(teams_in + ", " + teams_out).sortable({
                    revert: true,
                    connectWith: ".connected-sortable", 
                    cursor: 'move', 
                    receive: function(event, ui) {
                        update_teams(set_num);
                    } 
                }).disableSelection();
            }
    else {
                $(teams_in + ", " + teams_out).sortable({
                    revert: true,
                    connectWith: ".connected-sortable", 
                    cursor: 'move', 
                }).disableSelection();
    }
}

jQuery可排序代码不像我期望的那样

1 个答案: