如何将JavaScript中的对象关联到HTML元素

How to relate or associate an object in JavaScript to an HTML element?

本文关键字：关联 HTML 元素 对象 JavaScript      更新时间：2023-09-26

如何将JavaScript中的对象关联到HTML元素?

对于数组中的每个对象，我基于该对象生成一个复选框输入元素。

如果我添加一个事件侦听器来捕获复选框更改，我如何检索与该元素关联的对象?

正如其他答案所指出的，为每个DOM节点生成唯一的id允许您将这些节点用作对象中的键。

另一种可能性是许多框架提供了将数据分配给DOM元素的实用程序。例如，在jQuery中，您可以通过编写$(checkbox).data('mydata', obj)或YUI Y.one(checkbox).setData('mydata', obj)来实现。

您可以为每个复选框生成一个ID，并将ID存储在相应的对象中。然后，在事件处理程序中，您可以获得更改后的复选框的ID，并通过遍历数组找到相应的对象。

为了更容易找到对象，您还可以将id映射到对象(例如objectsByID[someID] = someObject)。使用这种方法，您甚至不必遍历数组。

创建objectsByID映射的示例:

var objectsByID = {};
for (var i = 0; i < objects.length; i++) {
    var id = "checkbox_" + i;
    var checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.setAttribute("id", id);
    // ...
    objectsByID[id] = objects[i];
}

你给每个复选框一个递进的ID，从"checkbox0"开始，当你点击一个复选框时，你检查相对的ID号，对应于数组[x]中的对象。

下面是一个非常简单的例子

创建全局对象，在创建复选框时存储其他对象，由唯一名称标识。将复选框元素的name或id属性设置为此唯一名称。

var source = [];
var data = []; //Your data
var appendTo = document.body;//Anywhere
for(var i=0; i<data.length;i++){
  var identifier = "chk"+i;
  var inp = document.createElement("input");
  inp.type = "checkbox";
  inp.name = identifier;//.name or .id - it's up to your preference
  inp.addEventListener("change", function(ev){
    if(this.checked){
      callback(source[this.name]);//calls function callback, passing the original object as an argument.
    }
  }, true);
  appendTo.appendChild(inp);
  source[identifier] = ...//your object.
}
相关文章：