JavaScript内のオブジェクトをHTML要素に関連付ける方法または関連付ける方法はありますか？

Question

JavaScriptのオブジェクトをHTML要素に関連付ける方法または関連付ける方法はありますか？

配列内の各オブジェクトに対して、そのオブジェクトに基づいてチェックボックス入力要素を生成します。

チェックボックスの変更をキャプチャするイベントリスナーを追加すると、その要素に関連付けられたオブジェクトを取得するにはどうすればよいですか？

Answer 1

各チェックボックスに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]; 
} 

Answer 2

"checkbox0"から始まる各チェックボックスにプログレッシブIDを付け、チェックボックスをクリックすると、配列[x]内のオブジェクトに対応する相対ID番号がチェックされます。

ここには本当にシンプルなexampleがあります。

Answer 3

を、各DOMノードの一意のIDを生成することで、オブジェクトのキーとしてそれらを使用することができます。

多くのフレームワークは、データをDOM要素に割り当てるためのユーティリティを提供する可能性があります。たとえば、jQueryでは$(checkbox).data('mydata', obj)と書くか、YUI Y.one(checkbox).setData('mydata', obj)と書いてください。

Answer 4

グローバルオブジェクトを作成し、一意の名前で識別されるチェックボックスを作成するときに追加のオブジェクトを保存します。チェックボックス要素の名前または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. 
}