Javascript 如何定义变量并在此基础上更改css?

Javascript 如何定义变量并在此基础上更改css?,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我试图根据mysql查询结果重置css,我可以使用IF{}else{}语句在一定程度上使其工作 我试图找到一种方法来定义一个响应中的数字,其中的数字可以是1-120,如果它出现在响应更改单元格中,则该数字出现在响应更改单元格中,如果它出现在响应更改单元格中,则将其更改为默认类 e、 g 但是上面提到的信标是1-120之间的任何东西,所以我的示例代码是 function(changetable) if (response.contains (number)) return $('td.(item.

我试图根据mysql查询结果重置css,我可以使用IF{}else{}语句在一定程度上使其工作

我试图找到一种方法来定义一个响应中的数字,其中的数字可以是1-120,如果它出现在响应更改单元格中,则该数字出现在响应更改单元格中,如果它出现在响应更改单元格中,则将其更改为默认类

e、 g

但是上面提到的信标是1-120之间的任何东西,所以我的示例代码是

function(changetable)
if (response.contains (number))
return $('td.(item.beacon)').css({'background-color: 'colorof location', border-color: red}
else if (response doesn't contain number)
    return $('td.(item.beacon)').css({'background-color: 'grey', border-color: black}
e、 g

将68/50/30单元格的背景色变为黄色

{beacon: "50", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}
{beacon: "30", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}
68不再显示为响应更改背景颜色灰色

第一点我似乎可以做的很好我的问题是改变颜色回灰色背景和边框为黑色,因为没有数字回应参考

function updateTable() {
    $('td.coloured').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).toggleClass('coloured');
    $.get('php/test2.php', function(response) {
  console.log(response, );
    $.each(response, function(index, item) {
      $(`td.${item.beacon}`).css({'background-color':item.location,'border-color':'black','border-width':'thin'}).addClass('coloured');
         $(`td.${item.beacon}`).css({'background-color':item.location,'border-color':'black','border-width':'thin'}).addClass('coloured');
      if (item.delivery_avg <= 4.00) {
        return $('td.coloured').css({'border-color': 'lime','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 4.01 && item.delivery_avg <= 7.00) {
        return $('td.coloured').css({'border-color': 'orange','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 7.01 && item.delivery_avg <= 10.00) {
        return $('td.coloured').css({'border-color': 'pink','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 10.01) {
        return $('td.coloured').css({'border-color': 'red','border-width': 'thick'}).toggleClass('coloured');
      } else {
    $('td').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).addClass('def');

    }
    });

   });
 }
 var updateTableInterval = setInterval(updateTable, 1000);
});

这不是
.css()
中的对象。顺便说一下,我认为jQuery不接受法语版本的
color
。您能给我们展示一下您的标记,或者更好的,一个最小的、具体的、可验证的示例吗?您的响应在我看来不像是有效的JSON。我已经在我的实际函数和php@PHPglue“颜色”是英式英语,但CSS仍然不会解析它…
{beacon: "50", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}
{beacon: "30", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}
function updateTable() {
    $('td.coloured').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).toggleClass('coloured');
    $.get('php/test2.php', function(response) {
  console.log(response, );
    $.each(response, function(index, item) {
      $(`td.${item.beacon}`).css({'background-color':item.location,'border-color':'black','border-width':'thin'}).addClass('coloured');
         $(`td.${item.beacon}`).css({'background-color':item.location,'border-color':'black','border-width':'thin'}).addClass('coloured');
      if (item.delivery_avg <= 4.00) {
        return $('td.coloured').css({'border-color': 'lime','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 4.01 && item.delivery_avg <= 7.00) {
        return $('td.coloured').css({'border-color': 'orange','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 7.01 && item.delivery_avg <= 10.00) {
        return $('td.coloured').css({'border-color': 'pink','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 10.01) {
        return $('td.coloured').css({'border-color': 'red','border-width': 'thick'}).toggleClass('coloured');
      } else {
    $('td').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).addClass('def');

    }
    });

   });
 }
 var updateTableInterval = setInterval(updateTable, 1000);
});
$sql = "SELECT
beacon.beacon,
beacon.location,
beacon.date,
beacon.counter,
del.delivery_avg
FROM
(
SELECT
    beacon,
    location,
    date,
    COUNT(location) AS counter
FROM `test`.`test`
WHERE `date` = CURDATE()
AND `time` > ( NOW() - INTERVAL 10 SECOND )
GROUP BY beacon
) beacon
JOIN
(
SELECT
    beacon,
    TIME_FORMAT(TIMEDIFF(MAX(`time`), MIN(`time`)), '%i.%s') AS delivery_avg
FROM `test`.`test`
WHERE date = CURDATE()
AND time > ( NOW() - INTERVAL 30 MINUTE )
GROUP BY beacon
) 
del ON beacon.beacon = del.beacon
GROUP BY beacon.counter DESC";
$result = $conn->query($sql);


$result = mysqli_query($conn ,  $sql);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
  $rows[] = $r;
}

echo json_encode($rows);