javascript - Jquery只激活当前行按钮

Question

我有 2 个按钮来扩展和缩小特定行的子表。单击时，按钮将从 + 变为 -。目前，当我单击按钮时，会显示正确的行。然而，所有按钮都变成了-。我可以知道如何将按钮限制为仅当前行。

这是我的代码

$('.expandlink').on('click', function () {
    var curr_row = $(this).parent().parent('tr').attr('data-id');

    $(".subtable").each(function () { //loop through each row
        if ($("[type='hidden']", this).val() == curr_row) {
            $(this).show();
            $('.expandlink').hide();
            $('.shrinklink').show();
        }
    });
});

$('.shrinklink').on('click', function () {
    var curr_row = $(this).parent().parent('tr').attr('data-id');

    $(".subtable").each(function () {
        if ($("[type='hidden']", this).val() == curr_row) {
            $(this).hide();
            $('.shrinklink').hide();
            $('.expandlink').show();
        }
    });
});

<tbody>
<?php $offset = $this->uri->segment(4,0)+1; ?>
<?php foreach($user as $row): ?>
<tr data-id="<?php echo $row->id; ?>">
<td><?php echo $offset++; ?></td>
<td><?php echo $row->company; ?></td>
<td><?php echo $row->firstname; ?></td>
<td><?php echo $row->lastname; ?></td>
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ? >"/><input type="button" class="expandlink" value="+"/></td>
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/><input type="button" class="shrinklink" value="-"/></td>
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/><input type="hidden" name="company" value="<?php echo $row->id; ?>"/><input type="hidden" name="set" value="edit"/><input type="button" class="editlink" value="Edit"/></td>
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/> <input type="hidden" name="company" value="<?php echo $row->id; ?>"/><input type="hidden" name="set" value="delete"/><input type="button" class="deletelink"  value="Delete"/></td>
    </tr>
    <tr class="subtable">
    <td><input type="hidden" value="<?php echo $row->id; ?>"/></td>
    <td><?php echo $row->company; ?></td>
    <td><?php echo $row->firstname; ?></td>
    <td><?php echo $row->lastname; ?></td>
</tr>
<?php endforeach; ?>
</tbody>

Answer 1

首先找到父行，然后指定其子行

$(this).parents("tr").find('.expandlink').hide();
$(this).parents("tr").find('.shrinklink').show();

编辑: 阅读您的表结构后，只注意到子表位于不同的 <tr> 中标签

$('.expandlink').on('click', function () {
    var curr_row = $(this).parent().parent('tr').attr('data-id');
    var row = $(this).parents("tr");
    $(".subtable").each(function () { //loop through each row
        if ($("[type='hidden']", this).val() == curr_row) {
            $(this).show();
            row.find('.expandlink').hide();
            row.find('.shrinklink').show();
        }
    });
});