引用JS對象到DOM元素

如何將特定的DOM元素引用到特定的JS對象？例如，我有一羣客戶。使用jQuery，爲每個客戶創建LI，並使用複選框並跨越客戶名稱。當點擊複選框時，我需要對該客戶的JS對象進行一些處理。這個問題，我如何能很容易地得到這個JS對象。目前，我有以下幾點：引用JS對象到DOM元素

$(customers).each(function(){ 
$("<li>").append($("<input type=\"checkbox\"").attr("id","chk_" + this.ID)).append($("<span>").text(this.Name)).appendTo("#ulCustomers"); 
}); 

$("#ulCustomers input[type=checkbox]").bind("click",function(){ 

var customerId = $(this).attr("id").replace("chk_",""); 
var CustomerObj = $(customers).filter(function() { return this.ID == customerId }).get(0); 

myProcess(CustomerObj); //Two above two lines are just for select correct customer from array. 
});

我相信JS的世界和jQuery存在更優雅的方式來做到這一點。謝謝

來源

2012-01-20 Alex Dn

您可以使用jQuery data功能

$(customers).each(function() { 
    var elem = $("<li><input type='checkbox'><span>" + this.Name + "</span></li>").appendTo("#ulCustomers"); 
    elem.find("input").data("customer", this); 
}); 

$("#ulCustomers input[type=checkbox]").click(function() { 
    var CustomerObj = $(this).data("customer"); 
    myProcess(CustomerObj); 
});

來源

2012-01-20 11:51:02 georg

當然，我怎麼可以忘記.data（）！ :)謝謝 –

您是否可以不通過引用相關Customer對象將click事件綁定到閉包？

這樣

$(customers) 
.each(function(){ 
    var custObj = this; 
    $("<li>") 
     .append(
      $("<input type=\"checkbox\"") 
      .append($("<span>") 
      .text(this.Name)) 
      .appendTo("#ulCustomers") 
      .bind("click", function(){ 
       myProcess(custObj); 
      }) 
});

來源

2012-01-20 11:50:56

沒錯這是最簡單的方式，但我想以避免這種類型的關閉:) –

我會使用jQuery的數據，就像這樣：

$（「複選框」）的數據（」客戶'，this.ID）;

檢索數據：

$("#ulCustomers input[type=checkbox]").bind("onchange",function(){ 

var customerId = $(this).data("customer"); 
var CustomerObj = $(customers).filter(function() { return this.ID == customerId }).get(0); 

myProcess(CustomerObj); //Two above two lines are just for select correct customer from array. 
});

此外，不要用點擊的複選框事件，使用onchange事件;）

來源

2012-01-20 12:00:33 marcio

我認爲將數據庫中的整個客戶obj存儲在ref中會比id更有效。我知道onchange存在，但我preffer使用onclick，然後檢查它是否檢查:) –

引用JS對象到DOM元素

回答

相關問題