保存按钮只显示当前行

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"); 

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

.save { 
 
    display: none; 
 
}

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

Answer 3

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

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