每個循環後通過點擊事件獲取對象值

Question

我正在一個JSON文件上運行每個循環，該文件讀取與按鈕（.region）上的單擊事件相對應的對象，然後使用if語句進行調整。

這樣做沒有問題，沒有click事件，使用它，並試圖讓對象輸出未定義。

我怎樣才能做到這一點使用下列內容：

對象：

var data = { 
    "employees": [{ 
      "title": "Jay Rob", 
      "region": "IL", 
      "startDate": "2016-12-06" 
     }, { 
      "title": "John Doe", 
      "region": "UK", 
      startDate ": "2016-12-06" 

     } 
    ] 
} 

JS：

$(document).ready(function() { 
    $(data.employees).each(function() { 
      var date = "2016-12-06"; 
      var reg = "IL"; 

      if (this.startDate == date) { 

       $('#emp-main').append('<div class="emp-box"><h2>' + this.title + '</h2><span>' + this.region + '</span>'); 
       // Works like it should! 
      } 

      $(".region").click(function() { 
        //an if statement here, taking the current object from the loop, comparing it to the variable region and startDate and outputting HTML. Would not work because of the scope. 
        if (data.employees.region == reg && data.employees.starDate == date) { 
         $('#emp-main').append('<div class="emp-box"><h2>' + this.title + '</h2><span>' + this.region + '</span>'); 
         //returns undefined 
        }); 
      }); 

    }); 
}); 

Answer 1

您正在訪問data.employees.region這會給你不確定是肯定的， 因爲data.employees是數組，你需要先指定你想要訪問的索引，使用$.each就會像這樣一個一個地發送

$(data.employees).each(function(i, employee) { 
     // then access region 
    employee.region 
}); 

畢竟，你將面對的是越來越上的所有按鈕，最後單擊對象，所以你需要將範圍與IIFE隔離

$(data.employees).each(function(i, employee) { 
     // here scope for $.each 
     // will affect the $.click scope 
     // because they use the same variable 
     // and $.each ends but the scope still accessible by $.click function 
    (function(emp){ 
     $(".region").click(function() { 
     // because the $.click will be called later 
     // can see what $.each scope last value 

     // to avoid clash with the outer scope of .each 
     // passed to function IIFE 
     // and this act as eval the value of the variable directly on 
     // declare it 

      emp.region 


     }); 
    }(employee)); 
});