For循環不會循環一個對象的值 - 將相同的處理程序應用於每個元素

Question

我已經編寫了一個旨在提供創建右鍵單擊（上下文）菜單的簡單方法的函數。很好，但是您作爲點擊處理程序傳遞給它的函數不適用於正確的菜單項。

當我調用該函數，我通過它的點擊事件和對象常量，其中包含菜單項的名稱和它們的處理函數，像這樣：

context.menu(e,{ 
    "Hello": function() { 
     alert("Hi"); 
    }, 
    "World": function() { 
     alert("Hello world!"); 
    }, 
}); 

據稱，該對象字面通過在for被環循環和每個處理函數被應用到相應的菜單項。但是，似乎傳入的第一個處理函數正在應用於所有菜單項。

的功能是這樣的：

this.menu = function(e,options) { 
    e.preventDefault(); 
    var x = e.clientX; 
    var y = e.clientY; 
    var id = math.floor(math.random()*8192); 
    id = "menu-"+id; 
    var menu = "<div class='menu-wrapper'></div>"; 
    menu = $(menu); 
    menu.attr("id",id); 
    var i = 0; 
    for(var key in options) { 
     var option = $("<span class='menu-item' id='menu-item-"+i+"'>"+key+"</span>"); 
     var fn = options[key]; 
     option.appendTo(menu); 
     option.on("click",function() { 
      // $(this).css("background","yellow"); - just a test, not needed any more 
      fn.call(); 
     }); 
     i++; 
    } 
    menu.appendTo("body"); 
    menu.css({ 
     top: y, 
     left: x, 
    }); 
    $(document).click(function() { 
     $("#"+id).remove(); 
    }); 
    $("#"+id).click(function(e) { 
     e.stopPropagation(); 
    }); 
} 

如何改變這一點，以便處理在正確的地方得到應用？

Live JSFiddle demo

UPDATE：

我已經嘗試添加代碼（使用typeof(options[key]);所以檢查函數的類型，你傳遞，但仍然沒有運氣console.log也給了我正確的價值觀等等。我不知道爲什麼它不循環

Answer 1

這裏的常見錯誤JS沒有塊範圍 - 您的fn變量正在被每次迭代重寫，請嘗試將它封裝在一個閉包中

this.menu = function(e,options) { 
    e.preventDefault(); 
    var x = e.clientX; 
    var y = e.clientY; 
    var id = math.floor(math.random()*8192); 
    id = "menu-"+id; 
    var menu = "<div class='menu-wrapper'></div>"; 
    menu = $(menu); 
    menu.attr("id",id); 
    var i = 0; 
    for(var key in options) { 
     (function(key){ // start closure 
      var option = $("<span class='menu-item' id='menu-item-"+i+"'>"+key+"</span>"); 
      var fn = options[key]; 
      option.appendTo(menu); 
      option.on("click",function() { 
       // $(this).css("background","yellow"); - just a test, not needed any more 
       fn.call(); 
      }); 
     })(key); // end closure 
     i++; 
    } 
    menu.appendTo("body"); 
    menu.css({ 
     top: y, 
     left: x, 
    }); 
    $(document).click(function() { 
     $("#"+id).remove(); 
    }); 
    $("#"+id).click(function(e) { 
     e.stopPropagation(); 
    }); 
}