值未正确传递给 onClick 函数答案

【问题标题】：Value not passing correctly to the function onClick值未正确传递给 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 );
               }

        }

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

【问题讨论】：

标签： javascript dom-events function-call

【解决方案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);
});

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

【讨论】：