Question

我正在尝试根据数组上的值更改背景色。所以cose似乎可以用，但是我一直只用一种颜色来接收ALL，而不是让它进行验证并相应地选择颜色。

我已经尝试使用JQUERY来基于AJAX响应进行此操作。控制台说可以，我的网站说不。我真的需要帮助。

以下代码是我的AJAX函数之一。它应该打印1个绿色和4个棕色/红色。尽管如此，我还是一直都是红色或绿色。

这是收到[1776220,17 ,242332 ,1119098, 500633]的数组

function listThem() {
  let color = '';
  $.ajax({
    type: "GET",
    url: "php/vehiculos/testServicio.php",
    data: "data",
    success: function(response) {
      let dinamica = JSON.parse(response);
      //VARIABLE PARA DINÁMICA DE SERVICIO COMUNITARIO
      //Aquíiiiiiiiii we are trying to reset
      $.each(dinamica, function(i, elem) {
        if (dinamica[i] <= 86400) {
          console.log(elem);
          color = '#51d847';
        }
        if ((dinamica[i] > 86400) & (dinamica[i] < 172800)) {
          console.log(elem);
          color = '#F18D05';
        }
        if (dinamica[i] >= 172800) {
          console.log(elem);
          color = '#E54028';
        }
      });
    }
  });
}

$.ajax({
  url: 'php/vehiculos/listing.php',
  type: 'GET',
  success: function(response) {
    /** Lets convert the string-like response into an usable object */
    let trueList = JSON.parse(response);
    // Some console checking
    console.log(trueList);
    /**Template that will be send to the HTML */
    let template = '';
    trueList.forEach(vehiculo => {
      /** Some back-ticks magics */
      template += `<tr taskId=${vehiculo.posId} > <!-- PAY ATENTION HERE-->
         <td class=''>
             <a>${vehiculo.name}</a>
         </td>
         <td style='background-color:${color}';>
             ${vehiculo.ultimaUpdate}  
         </td>
         <td>${vehiculo.phone}</td>
         <td>${vehiculo.category}</td>
        </tr>`
      $('#registros').html(template);
    });
  }
})

Answer 1

使用.append()代替.html()。您正在覆盖循环中的内容。

$('#registros').append(template);

另外，我添加了else-if语句和&&运算符。

function listThem() {
  let color = '';
  $.ajax({
    type: "GET",
    url: "php/vehiculos/testServicio.php",
    data: "data",
    success: function(response) {
      let dinamica = JSON.parse(response);
      //VARIABLE PARA DINÁMICA DE SERVICIO COMUNITARIO
      //Aquíiiiiiiiii we are trying to reset
      $.each(dinamica, function(i, elem) {
        if (dinamica[i] <= 86400) {
          console.log(elem);
          color = '#51d847';
        }
        else if ((dinamica[i] > 86400) && (dinamica[i] < 172800)) {
          console.log(elem);
          color = '#F18D05';
        }
        else if (dinamica[i] >= 172800) {
          console.log(elem);
          color = '#E54028';
        }
      });
    }
  });
}

根据作为AJAX响应接收的数组更改<td>背景颜色

1 个答案: