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/

Answer 2

var ids = "";

$(".test").on("click", function () {

    $(this).data("selected", !$(this).data("selected"));

    var ids = $(".test").filter(function () {
       return $(this).data("selected") === true; 
    }).map(function () {
       return this.id; 
    }).get().join(",");

    alert(ids);

});

演示：http: //jsfiddle.net/fY5tj/1

Answer 3

您可以像这样在输出 div 中附加您点击的项目 ID：

$('td.test').click(function() { 
 var currentText = $("#output").text();
 $("#output").text(currentText+this.id);
});