0

jQuery を使用して 2 つのリスト間でドラッグ アンド ドロップできるようにしていますが、期待どおりの動作が得られません。

各リストは、クラスのすべてのメンバーである IDteams_in_set<set-number>との 2 つのペアで提供されます。これらのペアリングはページ上に任意の数あり、最後にセット番号 0 があり、(既存のセットが編集されているのではなく) 新しいセットが作成されていることを表します。teams_not_in_set<set-number>connected-sortable

で次の関数を使用して設定しています$(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();
                }
            }
        }
    });

チームが 1 つのリストから別のリストに移動すると、そのupdate_teams(set_num);行が呼び出され、データベースを更新する Ajax がトリガーされるという考え方です。問題は変数set_numです。設定されたときの値を保持するのではなく、receive:最後に設定された値を保持しているように見えますが、これは常に 0 になります。

私は何を誤解していますか？そして、私が望む行動を得るために何をする必要がありますか?

4

1 に答える 1

1

これは、非同期 Javascript でよくある問題です。update_teams が実行されるまでに、ループはそのコースを実行しました。

同様の質問を参照してください:ループ内の JavaScript クロージャー – 簡単な実用例

私は通常、問題のコードを独自の関数に移動します。

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();
    }
}
于 2012-07-26T02:03:17.090 に答える