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

Question

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

每个列表都有两对，分别是ID 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(); 
    } 
}