javascript - 将父单元格 ID 存储在列表中

Question

我有一个表，当它被点击时，它会输出父单元格的 id。我怎样才能改变这一点，以便它输出多个点击单元格。例如，现在如果我单击单元格 ID“1”，它将输出 1。如果我单击单元格“2”，它将输出 2，依此类推。如果我点击了单元格 1、2 和 3，我怎样才能让它输出“1、2、3”。HTML:

<table>
    <tr>
        <td class='test' id='1'><img src='images/Dog.gif'/></td>
        <td class='test' id='2'><img src='images/Cat.gif'/></td>
        <td class='test' id='3'><img src='images/Mouse.gif'/></td>
        <td class='test' id='4'><img src='images/Human.gif'/></td>
    </tr>
</table>
<div id='output'></div>

JS:

$(document).ready(function() { 
    $('td.test').click(function() { 
        $('#output').text(this.id);
    });
});

此外，如果我再次单击单元格 2，是否有一种方法可以从列表中删除“2”。

Answer 1

使用数组来跟踪点击的项目:

$(document).ready(function() { 
    var clicked = [];
    $('td.test').click(function() {
        var found = clicked.indexOf(this.id);

        // Remove
        if(found !== -1) {
            clicked.splice(found, 1);

        // Add
        } else {
            clicked.push(this.id);
        }
        $('#output').text(clicked.join(','));
    });
});

http://jsfiddle.net/mx2kj/