14

我的 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”标志时，我可以更新主对象？

4

4 回答 4

18

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

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为基元不会创建引用。它将复制该值。

于 2013-04-19T20:44:47.130 回答
9

我建议考虑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)
})
于 2013-04-19T20:49:05.947 回答
1

您可以使用 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
}

试试这个！

于 2013-04-19T21:03:23.393 回答
0

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

所以当你循环时：

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 数据。可以遍历表中的每一行并重新创建您从中创建表的数据对象。

于 2013-04-19T20:42:24.077 回答