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();
});

Answer 2

嗯，你几乎使用parent做对了，但没有成功。这是一个有效的例子使用data属性。然后，您可以使用data方法轻松获取其值。

var target = $(this).parent().find("a.save");

＆＃13;

$('.plus-qty, .minus-qty').click(function() {
  $($(this).parent().find("a.save")).show();
});

＆＃13;

.save {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<table class="table table-bordered table-responsive">
  <tr class="product-1" data-prod-id="1" data-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" data-prod-id="2" data-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>

＆＃13;

Answer 3

使用选择器$(this).closest('tr').find('.save');

演示https://jsfiddle.net/sumitridhal/x25u11v7/4/

保存按钮仅显示当前行

3 个答案: