Question

我尝试使用jquery显示和隐藏点击行？到目前为止，我尝试获取一个链接的id，我点击然后连接一些后缀然后我尝试切换具有该id的行，所以我的html和查询代码是这样的：

<table>
    <tr>
       <td>col_1</td>
        <td><a href="#" id="1" class="show_row">click me</a></td>
    </tr>
    <tr class="hide_row" id="1_preview">
        <td>Hiden contet</td>
        <td><a href="#" id="1" class="hide_row">done</td>
    </tr>
    <tr>
        <td>col_1</td>
        <td><a href="#" id="2" class="show_row">col_2</a></td>
    </tr>
    <tr class="hide_row" id="2_preview">
        <td>a</td>
        <td><a href="#" id="2" class="hide_row">done</td>
    </tr>
</table>

jquery的：

$(".hide_row").hide();

$(".show_row").click(function() {
    var rowId = $(".show_row").attr('id');
    alert(rowId);
    $('#' + rowId + '_preview').show();
});
$(".hide_row").click(function() {
    var rowId = $(this).attr('id');
    $('#' + rowId + '_preview').hide();
});

如何编辑我的jquery按照我的描述工作？

Answer 1

而不是

var rowId = $(".show_row").attr('id');

使用

var rowId = $(this).attr('id');

因为DOM中有另一个元素show_row 其余的小变化都在小提琴中，见here。

Answer 2

您的<tr>和<a>具有相同的类（hide_row）会在加载时隐藏。如果点击a.hide_row，则不会显示a.show_row，因为它与tr.hide_row的ID不同。要解决您的问题：

$("tr.hide_row").hide();

$(".show_row").click(function() {
    var rowId = $(this).attr('id');
    alert(rowId);
    $('#' + rowId + '_preview').show();
});
$("a.hide_row").click(function() {
    var rowId = $(this).attr('id');
    $('#' + rowId + '_preview').hide();
});

使用jquery隐藏并显示基于其id的某些行

2 个答案: