Question

如果我点击fa图标

，我有两个td列的代码

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

然后我需要更改data-invoice-lock="0"。我试过这个

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

需要OUTPUT

<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

距离td最近的是tr。您应该将closest('td')更改为closest('tr')。代码应更改为

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

或使用

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

如果你的html结构不变。

Answer 2

试试这个：

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

Answer 3

一般来说，您需要找到距离最近的tr，然后在此tr中找到您的元素。

但是我写了这个额外的答案来引起你对jQuery中data()方法的注意。使用此方法，您可以操作元素中的数据属性，如设置和获取值。为什么这经常是＆＃34; 更好＆＃34;而不是使用attr()或prop()？

简答：

使用数据（），您可以返回包含大量JavaScript object和keys的{{1}}，并且更容易处理。但是，当您使用values代替data()时，您实际上无法在浏览器检查器中看到值的更改。但只需使用attr()来显示实际值，您就会看到它是变化。

下面的小提琴包含两种测试方法，但是console.log()目前已被注释掉了。只需玩它，看看它是如何工作的。

在这里，您可以使用工作小提琴：

＆＃13;

attr()

＆＃13;

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

＆＃13;

Answer 4

您也可以使用data代替attr：

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

以下是工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在jQuery中更改相邻td的数据属性？

4 个答案: