Как связать или связать объект в JavaScript с элементом HTML?

Question

Как связать или связать объект в JavaScript с элементом HTML?

Для каждого объекта в массиве я создаю элемент ввода флажка на основе этого объекта.

Если я добавлюпрослушиватель событий для захвата изменений флажка. Как получить объект, связанный с этим элементом?

Answer 1

Как указывают другие ответы, генерация уникального идентификатора для каждого узла DOM позволяет использовать их в качестве ключей в объекте.

Другая возможность состоит в том, что многие платформы предоставляют утилиты для назначения данных элементам DOM.Например, в jQuery вы можете сделать это, написав $(checkbox).data('mydata', obj) или в YUI Y.one(checkbox).setData('mydata', obj).

Answer 2

Создание глобального объекта, сохранение дополнительных объектов при создании флажков, идентифицируемых уникальным именем. Установите для атрибута 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.
}

Answer 3

Вы можете создать идентификатор для каждого из флажков и сохранить идентификатор в соответствующем объекте.Затем в обработчике событий вы можете получить идентификатор измененного флажка и найти соответствующий объект на основе этого путем перебора массива.

Чтобы упростить поиск объекта, вы также можете отобразитьидентификаторы объектов (например, 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];
}

Answer 4

Каждому флажку присваивается прогрессивный идентификатор, начиная с «checkbox0», а когда вы нажимаете на флажок, вы проверяете относительный номер идентификатора, который соответствует объекту в массиве [x].

Вот очень простой пример .