我在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”标志,我可以更新主对象吗?
答案 0 :(得分:15)
您实际上可以将对象直接附加到节点:
var n = document.getElementById('green-ford-escape');
n.carObject = myGarage.cars[0];
n.onclick = function() {
doSomethingWith(this.carObject);
}
为了消除歧义,在某些情况下,更清楚地写上面的事件处理程序来引用n
而不是this
:
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
设置为基元不会创建引用。它会复制该值。
答案 1 :(得分:8)
我建议考虑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)
})
答案 2 :(得分:0)
您需要在信息中使用某种ID或不同的行,否则您将不得不依赖数组索引来执行此操作。无论哪种方式,您都希望使用data attributes存储数据。
所以当你循环:
for (var i = 0, l = array.length; i < l; i++) {
var div = '<tr data-car="' + JSON.stringify(array[i]) + '" data-index="' + i + '"><td></td></tr>'
}
点击您的点击事件:
$('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数据。可以遍历表中的每一行并重新创建从中创建表的数据对象。
答案 3 :(得分:0)
您可以使用HTML5 data- *属性找出它是哪一行。你必须做这样的事情
var table = $('<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<myGarbage.cars.length; i++) {
// Create a new row and append to table
var tr = $('<tr>').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 = $('<td>').appendTo(tr);
var button = $('<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
}
尝试一下!!