如何将对象与DOM元素关联

我的JS设置中有一个主对象，即：

var myGarage = { cars: [ { make: "Ford", model: "Escape", color: "Green", inuse: false }, { make: "Dodge", model: "Viper" color: "Red", inuse: true }, { make: "Toyota", model: "Camry" color: "Blue", inuse: false } ] } 

现在我把车停在我的车上并放在桌子上。 在表格中我还有一个按钮，可让我将车辆切换为“正在使用中”和“未使用中”。

如何将每行的DOM元素与其对应的汽车相关联，这样如果我切换“inuse”标志，我可以更新主对象？

Answer 1

我建议考虑addEventListener ，以及一个使你的对象符合eventListener接口的构造函数。

这样，您可以在对象，元素和处理程序之间建立良好的关联。

为此，请创建一个特定于您的数据的构造函数。

 function Car(props) { this.make = props.make; this.model = props.model; // and so on... this.element = document.createElement("div"); // or whatever document.body.appendChild(this.element); // or whatever this.element.addEventListener("click", this, false); } 

然后实现界面：

 Car.prototype.handleEvent = function(e) { switch (e.type) { case "click": this.click(e); // add other event types if needed } } 

然后在原型上实现.click()处理程序。

 Car.prototype.click = function(e) { // do something with this.element... this.element.style.color = "#F00"; // ...and the other properties this.inuse = !this.inuse } 

那么你可以循环遍历数组，并为每个项目创建一个新的Car对象，它将创建新元素并添加监听器。

 myGarage.cars.forEach(function(obj) { new Car(obj) }) 

Answer 2

您实际上可以将对象直接附加到节点：

 var n = document.getElementById('green-ford-escape'); n.carObject = myGarage.cars[0]; n.onclick = function() { doSomethingWith(this.carObject); } 

为了消除歧义，在某些情况下，更清楚地写上面的事件处理程序来引用n而不是：

 n.onclick = function() { doSomethingWith(n.carObject); } 

您还可以直接引用附加事件中的对象：

 var n = document.getElementById('green-ford-escape'); n.onclick = function() { doSomethingWith(myGarage.cars[0]); } 

在后一种情况下， myGarage不一定是全球性的。 您可以执行此操作并期望它正常工作：

 (function(){ var myGarage = { /* ... etc ... */ }; var n = document.getElementById('green-ford-escape'); n.onclick = function() { doSomethingWith(myGarage.cars[0]); } })(); 

节点的事件函数将正确“保持”局部变量，有效地创建私有变量。

您可以在Chrome / FF / IE控制台中测试：

 var o = {a: 1}; var n = document.createElement('div'); n.innerHTML = "click me"; n.data = o; n.onclick = function() { n.data.a++; console.log(n.data, o); } document.body.appendChild(n); 

您应该看到控制台在每次单击时都会记录两个相同的对象，每个对象都会增加a值。

请注意 ，将n.data设置为基元将不会创建引用。 它会复制价值。

Answer 3

您需要在信息中使用某种ID或不同的行，否则您将不得不依赖数组索引来执行此操作。 无论哪种方式，您都希望使用数据属性存储数据 。

所以当你循环：

 for (var i = 0, l = array.length; i < l; i++) { var div = '' } 

并在您的点击事件：

 $('button').click(function() { var carIndex = $(this).closest('tr').attr('data-index'); var carData = $(this).closest('tr').attr('data-car'); if (carData) carData = JSON.parse(carData); myGarage.cars[carIndex].inUse = true; }) 

如果将数据绑定到DOM，则甚至可能不需要更新实际的JS数据。 可以遍历表中的每一行并重新创建从中创建表的数据对象。

Answer 4

您可以使用HTML5 data- *属性找出它是哪一行。 你必须做这样的事情

 var table = $(''); // Let's create a new table even if we have an empty table in our DOM. Simple reason: we will achieve single DOM operation (Faster) for (var i=0; i').appendTo(table); var carObject = myGarbage.cars[i]; // Traverse the JSON object for each car for (var key in carObject) { // Create other cells. I am doing the last one var td = $('
').appendTo(tr); var button = $('').attr('data-carId', i).addClass('toggle-inuse').appendTo(td); } } // If en ampty table awaits me in DOM $('#tableId').html(table.html()); 

现在我们将在按钮上添加事件监听器： –

 $('.toggle-inuse').click(function() { var i = $(this).data('carId'); myGarbage.cars[i].inuse = !myGarbage.cars[i].inuse; //Wow done } 

试试吧!!