0 
gameDesign = {          

              makeSeats: function( num ) {  //num = number of seats 
        
                        
                        var seats = [];
                        var seat;
                        
                        var seatWidth = 20;
                        var seatHeight = 20;
                        var total = 100;
                        
                        for( var i=1; i<= num; i++ ) {
                            
                            seat = $('<div id="seat_'+i+'" class="seats"><div id="index_'+i+'" style="height:100%; width:100%;"><div style="height:100%; width:100%;">Sit Here</div></div></div>');
                            
                            seat.children(":first").children(":first").click( function(event, i){ 
                                                                                                    var tim = i;
                                                                                                    gameDesign.sitOnIndexNo( tim ); });

                },

               sitOnIndexNo: function( seatIndex ) {
                
                       tableFunc.makePlayerSit( RummyGlobal.myInfo.get_jid(), seatIndex );
               }

        }

問題：「ここに座る」をクリックすると、インデックス値が未定義として渡されます..これはクロージャーに関連するものであることはわかっています..しかし、さらに説明と解決策が必要です..

4

3 に答える 3

1

あなたは「クリック」について言及しているので、「ここに座って」と言っているこれらすべての div を生成することを計画していると思います。ユーザーが「ここに座る」をクリックすると、関数 sitOnIndexNo が呼び出されます。この仮定に基づいて、ここに私の提案があります：

gameDesign = {          
    makeSeats: function( num ) {  //num = number of seats 
        for( var i=1; i<= num; i++ ) {
            $("#id_of_element_where_you_want_to_put_the_div").
            append('<div id="'+i+'" class="seats" style="height:100%; width:100%;">Sit Here</div></div></div>');
        }
    },
    sitOnIndexNo: function( seatIndex ) {
        tableFunc.makePlayerSit( RummyGlobal.myInfo.get_jid(), seatIndex );
    }
}

// Event handler:
$(".seats").live("click", (function(e) {
    var tim = $(this).attr("id");
    gameDesign.sitOnIndexNo(tim);
});

基本的に、makeSeats関数は「ここに座る」div を生成し、それらのクリック イベントは新しいイベント ハンドラーによって処理されます。

于 2012-10-30T06:42:51.643 に答える
1

最初に、'click' eventHandler を宣言して、'i' のパラメーターを 2 番目のパラメーターとして受け入れます。ただし、jquery パラメーターは、eventHandler への最初のパラメーターとして 1 つのイベント オブジェクトのみを渡します。つまり、「tim」を「i」に割り当てると、未定義になります。

次に、これを変更した後、コードを再度実行すると、参照されている「i」が「makeSeats」関数スコープに属しているため、「tim」が「num」+ 1 に等しくなります。関数の一部として保存されません。

あなたが望むのは次のようなものです：

for(var i = 0; i <= num; i++){
    $('.foo').click({i:i}, function(e){
        gameDesign.sitOnIndexNo(e.data.i);
    });
}

eventHandler に渡される「data」プロパティの詳細については、こちらを参照してください。

于 2012-10-30T06:23:04.980 に答える
1 
function(event, i){ ...

これはi2 番目の引数であり、その本体のi内部はその本体の外部とは無関係iです。

jQuery は、呼び出すイベント ハンドラーに 1 つの引数 (イベント) のみを渡します。さらに、ターゲット要素を として渡しthisます。これは、2 番目の引数が常に であることを意味しますundefined。

これを行う場合：

for(var i=0; i<num; i++){
   var seat = $("...");
   seat.find("...").click(function(e){
     gameDesign.sitOnIndexNo(i)
   )
}

値が変更された後に変数 i にアクセスします。i の値を取得する自己呼び出し関数を作成できます。

for(var i=0; i<num; i++){
   var seat = $("...");
   var handler = (function(i){
     return function(event){
       gameDesign.sitOnIndexNo(i)
     )
   })(i);
   seat.find("...").click(handler);
}

...またはseat.data@ClarkPan が提案するように使用します。

于 2012-10-30T06:27:29.133 に答える