使用循環將click事件綁定到幾個不在javascript / jquery中的元素

Question

我有一張消息地圖說：

var Mapping = {
"notnow": 2,
"expensive": 3,
"not_worth_it": 4
}

我有一堆html元素（讓我們說具有相同名稱的div）

<div id="notnow"></div>

，等等

現在我想為每個人附加一個點擊處理程序，我運行一個循環，如下所示

function setThemUp(){
   for(var item in Mapping)
   {
      $("#" + item).bind('click', function () {
      Apply(Mapping[item]); });
   }
}

但由於某些原因，所有這些似乎都受到“not_worth_it”的束縛：4。 不是他們各自的價值觀。

我正在使用Jquery 1.5。

有人可以解釋為什么會發生這種情況嗎？

我的猜測是，不是將Mapping [item]解析為它們的值，而是將它作為引用或其他東西傳遞，這就是為什么因為item的值最終指向“不值得”，所有它們都調用具有該值的函數本身。 我可以用任何方式克服它們。

將每個硬編碼為

  $("#notnow").bind('click', function () {
      Apply(Mapping["notnow"]); });
  $("#expensive").bind('click', function () {
      Apply(Mapping["expensive"]); });
  $("#not_worth_it").bind('click', function () {
      Apply(Mapping["not_worth_it"]); });

確實有效，但我更喜歡帶循環的優雅解決方案。

回答

我選擇了封閉解決方案

function setThemUp(){
   for(var item in Mapping)
   {
       $("#" + item).bind('click', (function () {
            return function(temp) {
                 Apply(Mapping[temp]); };
            })(item));
       }
   }

理由是，這更像是為什么循環不起作用而不是jquery的優化，因為這畢竟是一個代表性的例子，而不是我的實際代碼，這是一個優雅的解決方案。

Answer 1

這是范圍問題的典型案例：您在每個綁定處理程序中引用變量item 。 但是變量item改變 - >它被分配了Mapping對象文字的所有屬性，最后一個屬性是not_worth_it 。

創建閉包可能有助於保留每個回調的item狀態：

for(var item in Mapping)
{
   $("#" + item).bind('click', (function(currentItem)
   {//IIFE, pass item as argument---------/
        return function ()
        {//return function, \/ access to closure scope
            Apply(Mapping[currentItem]);
         };
    }(item)););
}

但這似乎有點矯枉過正，為什么不簡單地委托事件，並使用Mapping[$(this).attr('id')] ？

Answer 2

我建議轉到這種形式：

添加mapped到映射div的類。

HTML

<div id="notnow" class="mapped"></div>

JS

function setThemUp(){
    $('.mapped').bind('click', function () {
        Apply(Mapping[this.id]); 
    });
}

Answer 3

問題是你需要寫：

for (var item in Mapping) 

而不是foreach。