保存按鈕只顯示當前行

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/