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

Question

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

我已经尝试过:

$(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

Answer 1

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

我相信以下几行可以实现您的意图

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