值未正确传递给 onClick 函数

Posted 2023-03-31

【中文标题】值未正确传递给 onClick 函数

【英文标题】：Value not passing correctly to the function onClick

【发布时间】：2012-10-19 11:23:08

【问题描述】：

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

        

问题：单击“坐在这里”时，索引值被传递为未定义..我知道这与闭包有关..但是，我需要进一步的解释和解决方案..

【参考方案1】：

function(event, i) ...

预计 i 作为它的第二个参数，并且其正文内的任何 i 与其正文外的任何 i 无关。

jQuery 只将一个参数传递给它调用的事件处理程序——事件。此外，它将目标元素作为this 传递。这意味着第二个参数总是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);

... 或使用@ClarkPan 建议的seat.data。

【讨论】：

是的，我在其他地方也有这个......但是谢谢你的解释

【参考方案2】：

首先，您已声明“click”事件处理程序以接受“i”参数作为第二个参数。但是，jquery 参数仅通过单个事件对象作为 eventHandler 的第一个参数。这意味着，当您将 'tim' 指定为 'i' 时，它会出现 undefined。

其次，在改变这个之后，如果你再次运行你的代码，你会得到 'tim' 等于 'num' + 1，因为被引用的 'i' 属于 'makeSeats' 函数范围，并且不作为函数的一部分存储。

你想要的是这样的：

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

可以在here找到更多关于 eventHandler 的“数据”属性的信息。

【参考方案3】：

你提到了“点击”，所以我假设你打算生成所有这些 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);
);

所以基本上，ma​​keSeats 函数会生成“Sit Here” div，并且它们的点击事件由新的事件处理程序处理。