jQueryで隣接するtdのデータ属性を変更するにはどうすればよいですか？

Question

私はFAのアイコンを

<i class="fa pad5 fa-unlock-alt" ></i> 

をクリックした場合、私はその後、私はdata-invoice-lock="0"を変更する必要があり、2つのTD列のこのようなコードを持っています。 私はこの

$(this).closest('td').find('.invoiceCostCol').attr('data-invoice-lock','0'); 

を試みたが、結果に

INPUT

<td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="1"></td> 
<td rowspan="1" class="reportSmallWd"> 
    <i class="fa pad5 fa-unlock-alt" ></i> 
</td> 

を得ていない出力が目標tdの最も近いtrある

<td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="0"></td>  
<td rowspan="1" class="reportSmallWd"> 
    <i class="fa pad5 fa-unlock-alt" ></i> 
</td> 

Answer 1

を必要としていました。 closest('td')をclosest('tr')に変更する必要があります。コードは

$(this).closest('tr').find('.invoiceCostCol').attr('data-invoice-lock','0'); 

に変更またはあなたのhtmlの構造が一定であれば

$(this).parent().prev().attr('data-invoice-lock','0'); 

を使用する必要があります。

Answer 2

これを試してみてください：

$(this).closest('tr').find('.invoiceCostCol').removeAttr('data-invoice-lock').attr('data-invoice-lock','0'); 

Answer 3

ます。またattrの代わりに、ユーザーdataことができます。

$(this).closest('tr').find('.invoiceCostCol').data('invoice-lock', '0'); 

ここでは、実施例である：

$('.pad5').click(function() { 
 
    $(this).closest('tr').find('.invoiceCostCol').data('invoice-lock', '0'); 
 
    alert($(this).closest('tr').find('.invoiceCostCol').data('invoice-lock')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<table> 
 
    <tr> 
 
    <td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="1"> 
 

 
    </td> 
 
    <td rowspan="1" class="reportSmallWd"> 
 
     <i class="fa pad5 fa-unlock-alt"></i> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 4

一般的に、最も近いtrを見つけて、tr内の要素を見つける必要があります。

しかし、私はこの追加の答えをjQueryのdata()メソッドに注目して書きました。このメソッドを使用すると、値の設定や取得など、要素内のデータ属性を操作できます。これは多くの場合、attr()またはprop()を使用するよりも、「がより良い」になるのはなぜですか？

短い答えは：データを使用して

（）あなたはkeysとvaluesの多くを含めることができますJavaScript object返すことができ、処理する方がはるかに簡単です。しかし、attr()の代わりにdata()を使用すると、実際にブラウザのインス​​ペクタで値の変更が表示されることはありません。しかし、実際の値を表示するにはconsole.log()を使用してください。変更が反映されます。

以下のフィドルはテストの両方の方法を備えていますが、現時点ではattr()がコメントアウトされています。ちょうどそれと遊んで、それが動作する方法を参照してください。

ここでは、作業フィドルで行く：

$(function(){ 
 

 
$('i.fa-unlock-alt').on('click', function(){ 
 
    $(this).closest('tr').find('td.invoiceCostCol').data('invoice-lock','0'); 
 
    //$(this).closest('tr').find('td.invoiceCostCol').attr('data-invoice-lock','0'); 
 
    console.log($('td.invoiceCostCol').data('invoice-lock')); 
 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<table> 
 
<tr> 
 

 

 
<td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="1"> 
 

 
</td> 
 

 
<td rowspan="1" class="reportSmallWd"> 
 
    <i class="fa pad5 fa-unlock-alt" ></i> 
 
</td> 
 

 
</tr> 
 
</table>