根据来自 jquery ajax 请求的状态更改徽章颜色答案

【问题标题】：Change Badge color according to status from jquery ajax request根据来自 jquery ajax 请求的状态更改徽章颜色
【发布时间】：2019-02-13 10:49:10
【问题描述】：

我正在使用 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);
    }
  });

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

【问题讨论】：

您能否在您的问题中添加result 是什么？它是一个数组吗？你验证过吗？您从中获取数据的 URL 是否提供 JSON？究竟有什么事情不像你想要的那样？错误？
> 我做错了什么？ - 你怎么说你做错了什么？
您做错的是，您正在使用 jquery 选择器来更改无法工作的徽章类，因为您生成的 html 仍在变量 output 中，并且尚未添加到 DOM

标签： javascript jquery arrays ajax frontend

【解决方案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 中存在的元素

【讨论】：

这是确切的解决方案。谢谢！！
不客气 :)

【解决方案2】：

试试这个。这里的问题是 .badge 跨度没有在 DOM 中创建，而您在循环中选择了未创建的跨度。在 '$("#adminTable").html(output);' 之后创建 DOM这个声明。

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

【讨论】：

这很有帮助，谢谢。