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选择器来更改badge类，因为您生成的html仍位于变量output中，并且尚未添加到DOM中，所以该类无法工作。 jQuery Selectos用于选择和处理DOM中存在的元素

Answer 2

尝试一下。这里的问题是，.badge span未在DOM中创建，并且您正在循环中选择未创建的span。 DOM在'$（“＃adminTable”）。html（output）;之后创建这句话。

$.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);
  }
});

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

2 个答案: