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(); 
    } 
}