ajaxの成功後にラベルのクラスを変更するには？

Question

それは誰がどのように変更する方法を伝えることができます

$(document).ready(function(){ 
    $(".att").click(function() { 
     var x_userid = $(this).closest('tr').find('.x_userid').val(); 
     var formm = { 
      'x_userid': x_userid 
     } 
     $.ajax({ 
      type: "POST", 
      url: 'src/ajax.php', 
      data: formm, 
      encode: true, 
      success: function (data) { 
       $(this).closest('tr').find('td span.xlbl').addClass("label-success").removeClass("label-warning"); 
      } 
     }); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<tr> 
<td> Gabb </td> 
<td class='resultt'> 13,12 </td> 
<td> 15,41 </td> 
<td> 150 </td> 
<td> <span class='xlbl label label-warning'> Pending </span> </td> 
<td> <button type='submit' class='att btn bgm-teal waves-effect'><i class='zmdi zmdi-refresh'></i></button> </td></tr> 

を変更していないので、私はアヤックスの成功の後にラベルのクラスを変更しようとしているが、私は、私はnull値を取得していると思いますそれは正しくですか？私は良いチャンスthisがあります

Answer 1

あなたはfind('span.xlbl')によって置き換えられる現在のelement.Also find('td span.xlbl')必要性のコンテキストを格納する変数を作成することができます。

このコードは、テストAPIを使用しているとスパンのクリック時に、それは、Ajaxの成功ハンドラ内でのthisを記録

// click on the element to trigger the ajax 
 
$('.att ').on('click', function() { 
 
    let _$t = $(this); // hold the context 
 
    $.ajax({ 
 
    type: "GET", // fake api method 
 
    url: 'https://jsonplaceholder.typicode.com/posts/1', //fake api url, 
 
    data: '', 
 
    encode: true, 
 
    success: function(data) { 
 
     // replacing style of the element 
 
     _$t.closest('tr').find('span.xlbl').addClass("label-success").removeClass("label-warning"); 
 
    } 
 
    }); 
 
})

.label-success { 
 
    color: green 
 
} 
 

 
.label-warning { 
 
    color: yellow 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> Gabb </td> 
 
    <td class='resultt'> 13,12 </td> 
 
    <td> 150 </td> 
 
    <td> <span class='xlbl label label-warning'> Pending </span> </td> 
 
    <td> <button type='submit' class='att btn bgm-teal waves-effect'><i class='zmdi zmdi-refresh'></i>Click</button> </td> 
 
    </tr> 
 
</table>

Answer 2

それを感謝し、あなたが期待しているものではありません。

また、あなたがtdクラスで「xlbl」を持っていない、あなたはそのクラスでspanを持っているので、あなたが.find('td span.xlbl')

Answer 3

のようにそれをターゲットと思いますが、代わりにこのような何かをしようとする場合があります。

<script> 
     $.ajax({ 
      type: "POST", 
      url: 'src/ajax.php', 
      data: formm, 
      encode: true, 
      success: function (data) { 
       $("#trID td span.xlbl").addClass("label-success").removeClass("label-warning").html("Success"); 
       console.log("success", data); 
      } 
     }); 
</script> 

<tr id="trID"> 
    <td> Gabb </td> 
    <td class='resultt'> 13,12 </td> 
    <td> 150 </td> 
    <td> <span class='xlbl label label-warning'> Pending </span> </td> 
</tr>