切换仅适用于第一个元素

Question

我试图切换（）单个表行。每一行都有一个序列号，并在行的id中处理。单击more.png图像时，将显示或隐藏该行。这只是第一行。我错过了什么？

$(function () {
function showdetail()
    {
    var id = $(this).attr('rel');
    $('#'+id).toggle();
    }
    $('#detail').click(showdetail);
});

单击此按钮。

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />';

显示或隐藏。

echo '<tr id="details'.$serial.'"><td>stuff...</td><td>stuff...</td></tr>';

Answer 1

当页面加载时，您将单个函数绑定到单个元素：第一次出现具有id =“detail”的元素。您不能在具有相同ID的页面上拥有多个元素。

替换这个：

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />';

用这个：

echo '<img src="more.png" class="detail" rel="details'.$serial.'" />';

然后替换

$('#detail').click(showdetail);

用这个：

$('.detail').click(showdetail);

显然，这是未经测试的，所以让我知道它是否有效......