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

<ng-container matColumnDef="checked"> <mat-header-cell *matHeaderCellDef> </mat-header-cell> <mat-cell *matCellDef="let element" fxLayout="row" fxLayoutAlign="center center"> <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox> </mat-cell> </ng-container>很有可能不是你所期待的。

此外，您没有this类“xlbl”，您拥有该类的td，因此您可以将其定位为span

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的范围

＆＃13;

// 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");
    }
  });
})

＆＃13;

.label-success {
  color: green
}

.label-warning {
  color: yellow
}

＆＃13;

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

＆＃13;

ajax成功后如何更改标签类？

3 个答案: