根据jquery ajax请求的状态更改徽章颜色

Question

我使用get请求从端点获取一些数据，我想使用请求的状态来更改请求状态的颜色。

$.ajax({
    type: 'GET',
    url: 'api/v1/service/tax',
    success: (result)=>{
        let output="";
        let serialNumber = 1;

        for (var i in result){
          output+= `<tr class="custom-table-rows">
                        <th scope="row">${serialNumber++}</th>
                        <td>${result[i].entityName}</td>
                        <td>${result[i].serviceName}</td>
                        <td>${result[i].dateRequested}</td>
                        <td><span class="badge badge-pill">${result[i].status}</span></td>
                    </tr>`
            if(result[i].status === 'PENDING'){
                $('span.badge').addClass('badge-danger');
            } else if(result[i].status === 'IN PROCESS'){
                $('span.badge').addClass('badge-warning');
            }else{
                $('span.badge').addClass('badge-success');
            }
        }

        $("#adminTable").html(output);
    }
  });

这是我的代码，这是我用来检查循环的条件语句。我究竟做错了什么？

Answer 1

你应该用以下方式做到这一点

$.ajax({
    type: 'GET',
    url: 'api/v1/service/tax',
    success: (result)=>{
        let output="";
        let serialNumber = 1;
        let badge = "";

        for (var i in result){
          output+= `<tr class="custom-table-rows">
                        <th scope="row">${serialNumber++}</th>
                        <td>${result[i].entityName}</td>
                        <td>${result[i].serviceName}</td>
                        <td>${result[i].dateRequested}</td>`

            if(result[i].status === 'PENDING'){
                badge = 'badge-danger' ;
            } else if(result[i].status === 'IN PROCESS'){
                badge = 'badge-warning' ;
            }else{
                badge = 'badge-success' ;
            }
         output+= `<td><span class="badge badge-pill ${badge}">${result[i].status}</span></td></tr>`
        }

        $("#adminTable").html(output);
    }
  });

说明：你做错了是，你正在使用jQuery选择器来更改不能工作的徽章类，因为你生成的html仍然在变量output中并且尚未添加到DOM中。 jQuery Selectos用于选择和操作DOM中存在的元素

Answer 2

尝试这个。这里的问题是.badge span不是在DOM中创建的，而是在循环中选择未创建的span。 DOM在$（“＃adminTable”）之后创建.html（输出）;'这个说法。

$.ajax({
  type: 'GET',
  url: 'api/v1/service/tax',
  success: (result) => {
    let output = "";
    let serialNumber = 1;

    for (var i in result) {
      output += '<tr class="custom-table-rows"> <
        th scope = "row" > $ {
          serialNumber++
        } < /th> <
        td > $ {
          result[i].entityName
        } < /td> <
        td > $ {
          result[i].serviceName
        } < /td> <
        td > $ {
          result[i].dateRequested
        } < /td> <
        td > < span class = "badge badge-pill '
      if (result[i].status === 'PENDING') {
        output += 'badge-danger';
      } else if (result[i].status === 'IN PROCESS') {
        output += 'badge-warning';
      } else {
        output += 'badge-success';
      }
      output += '">${result[i].status}</span></td> </tr>';
    }

    $("#adminTable").html(output);
  }
});