Question

如何将特定的DOM元素引用到特定的JS对象？例如，我有一系列客户。使用jQuery，我为每个客户创建了LI，其中包含checkbox和span for customers name。单击复选框时，我需要对该客户JS对象进行一些处理。问题是，我如何能够轻松地获得这个JS对象。目前我有以下内容：

$(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存在更优雅的方式来做到这一点。感谢

Answer 1

您可以使用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);
});

Answer 2

您是否可以将click事件绑定到具有相关Customer对象引用的闭包？

像这样

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

Answer 3

我会使用jQuery数据，就像这样：

$（“复选框”）。data（'customer'，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事件;）

将JS对象引用到DOM元素

3 个答案: