javascript - 使用 jQuery 显示和隐藏动态生成的表格元素

Question

我有一张从数据库中提取的项目表。这些项目的布局如下:

(+) 02/04/2014
Item 1
(+) 02/05/2014
Item 2
Item 3
(+) 02/06/2014
Item 4
Comment for item 4
Item 5

日期下的项目是隐藏的，当用户点击(+)号时，它会显示它下面的项目，并将(+)替换为(-)以隐藏项目。

HTML 大致如下所示:

<table>
<tr><td>(+)</td><td>02/04/2014</td></tr>
<tr id="id_1" class="hidden"><td colspan="2">Item 1</td></tr>
<tr><td>(+)</td><td>02/05/2014</td></tr>
<tr id="id_2" class="hidden"><td colspan="2">Item 2</td></tr>
<tr id="id_3" class="hidden"><td colspan="2">Item 2</td></tr>
<tr><td>(+)</td><td>02/06/2014</td></tr>
<tr id="id_4" class="hidden"><td colspan="2">Item 4</td></tr>
<tr id="comment_id_4" class="hidden"><td colspan="2">Comment for item 4</td></tr>
<tr id="id_5" class="hidden"><td colspan="2">Item 5</td></tr>
</table>

我能想到的唯一方法是通过再次循环记录并将此 a href 添加到加号来动态生成 JavaScript 函数:

<a href="#" onclick="toggle(242014);return false">(+)</a>

下面是生成的 JavaScript 示例:

 function toggle(id) {
    switch (id) {
    case 242014:
        $("#id_1").toggle();
        break;
    case 252014:
        $("#id_2").toggle();
        $("#id_3").toggle();
        break;
    case 262014;
    $("#id_4").toggle();
    $("#comment_id_4").toggle();
    $("#id_5").toggle();
    break;
    }

它有效，但它很丑。有更优雅的方法吗？

谢谢。

Answer 1

我会添加一个额外的属性来识别受影响的行，例如:

<tr colspan="2" id="id_2" date="12122014" class="hidden" >

那么javascript就是

函数 toggleByDate(date){
$('tr[date="'+date+'"]').toggle();
}

关于 jQuery 中有用的属性选择器的更多信息 here