Ajax成功后如何更改标签的类？

Question

我尝试在ajax成功之后更改标签的类，但是我认为我得到的是空值，因为它没有改变

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

谁能告诉您如何正确更改？ 我很感激

Answer 1

有一个很好的机会， this是不是你期待什么。

另外，您没有类别为“ xlbl”的td ，但该类别具有span ，因此您可以将其定位为.find('td span.xlbl')

Answer 2

您可能想尝试做这样的事情。

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

Answer 3

您可以创建一个变量来存储当前元素的上下文。此外， find('td span.xlbl')需要替换为find('span.xlbl') 。

此代码段使用的是测试api，单击范围时它将调用ajax

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