javascript - 仅显示当前行的保存按钮

我试图让保存按钮显示在我按保存按钮的当前行上。目前，它工作正常，除非我有相同的产品，但没有该产品的选项。

我努力了：

$(this).parent('tr');

但这也无济于事

HTML：

<table class="table table-bordered table-responsive">
  <tr class="product-1" prod-id="1" qty="1">
    <form action="#" class="edit-cart-form"></form>
    <td>ID</td>
    <td>Test Product</td>
    <td>$20.00</td>
    <td>
      <div class="add-qty">
        <i class="fa fa-minus minus-qty"></i>
        <input type="text" value="1" />
        <i class="fa fa-plus plus-qty"></i>
        <br>
        <a href="javascript:void(0);" class="save">save</a>
      </div>
    </td>
    <td>Remove</td>
  </tr>

  <tr class="product-1" prod-id="2" qty="1">
    <form action="#" class="edit-cart-form"></form>
    <td>ID</td>
    <td>Test Product</td>
    <td>$20.00</td>
    <td>
      <div class="add-qty">
        <i class="fa fa-minus minus-qty"></i>
        <input type="text" value="1" />
        <i class="fa fa-plus plus-qty"></i>
        <br>
        <a href="javascript:void(0);" class="save">save</a>
      </div>
    </td>
    <td>Remove</td>
  </tr>
</table>

JS：

$('.plus-qty').click(function() {
  var target = '.product-' + $(this).closest('tr').attr('prod-id') + ' .save';
  $(target).show();
});

$('.minus-qty').click(function() {
  var target = '.product-1' + $(this).closest('tr').attr('prod-id') + ' .save';
  $(target).show();
});

JSFiddle Demo

最佳答案

我认为您的目标字符串过于复杂，这是导致问题的原因。

以下几行符合我的预期

$('.plus-qty, .minus-qty').click(function() {
  $(this).closest('tr').find('.save').show();
});