現在の行にのみ保存ボタンを表示する

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/