Wie ändert man das Datenattribut des benachbarten TD in jQuery?

Question

Ich habe einen Code wie folgt mit zwei td Spalten, wenn ich auf das Symbol fa klicken

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

dann muss ich die data-invoice-lock="0" ändern. Ich habe versucht, diese

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

aber nicht das Ergebnis bekommen

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> 

Die OUTPUT erforderlich

<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

Das nächstgelegene Ziel tdtr ist. Sie sollten closest('td') zu closest('tr') ändern. Der Code sollte geändert

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

Oder

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

verwenden Wenn Struktur Ihrer html konstant ist.

Answer 2

Versuchen Sie folgendes:

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

Answer 3

Sie können auch Benutzer data anstelle von attr:

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

Hier arbeitet Beispiel:

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

Nun in der Regel müssen Sie die nächste tr finden und dann finden Sie Ihr Element innerhalb dieser tr.

Allerdings habe ich diese zusätzliche Antwort geschrieben, um Sie auf die data() Methode in jQuery aufmerksam zu machen. Mit dieser Methode können Sie Datenattribute in Ihren Elementen wie Einstellung und Abrufen von Werten manipulieren. Warum ist das oft mal "besser" als mit attr() oder ?

Kurze Antwort:

Mit Daten() Sie können eine JavaScript object zurück, die viele keys und values und es ist viel einfacher zu verarbeiten enthalten. Wenn Sie jedoch data() anstelle von attr() verwenden, sehen Sie die Änderung eines Werts in Ihrem Browser-Inspektor tatsächlich nicht. Aber verwenden Sie einfach console.log(), um den tatsächlichen Wert anzuzeigen, und Sie werden sehen, dass es Änderungen gibt.

Die folgende Geige bietet beide Methoden zum Testen, attr() ist im Moment auskommentiert. Spiel einfach damit und schau, wie es funktioniert.

Hier gehen Sie mit der Arbeits Geige:

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