Javascript AJAX响应div颜色修改_Javascript_Php_Html_Css_Ajax

Javascript AJAX响应div颜色修改

javascript php html css ajax

Javascript AJAX响应div颜色修改,javascript,php,html,css,ajax,Javascript,Php,Html,Css,Ajax,当AJAX响应具有一种类型的值（具体地说是=“BusyChair”）时，我想更改div的背景颜色我在画div的背景中画了一幅画。我知道应该有更好的办法，但这就是我想到的。所以我们有更多的椅子，我只是想指出它是如何工作的 HTML+JS部分+CSS： <!DOCTYPE html> <html> <head> <style> #roomName{ width:8%; height:5%; background-color: #ddd; po

当AJAX响应具有一种类型的值（具体地说是=“BusyChair”）时，我想更改div的背景颜色

我在画div的背景中画了一幅画。我知道应该有更好的办法，但这就是我想到的。所以我们有更多的椅子，我只是想指出它是如何工作的

HTML+JS部分+CSS：

<!DOCTYPE html>
<html>
<head>
<style>
#roomName{
 width:8%;
 height:5%;
 background-color: #ddd;
 position:fixed;
 border: solid;
 left : /*position*/;
 top : /*position*/;
}

article {
 position: relative;
 float: right;
 width: 100%;
 background-color: white;
}

#chair01 {
 width:0.5%;
 height:0.5%;
 background-color: #ddd;
 position:fixed;
 border: solid;
 left : /*position*/;
 top : /*position*/;
}
#chair02 {
 width:0.5%;
 height:0.5%;
 background-color: #ddd;
 position:fixed;
 border: solid;
 left : /*position*/;
 top : /*position*/;
}
#chair03 {
 width:0.5%;
 height:0.5%;
 background-color: #ddd;
 position:fixed;
 border: solid;
 left : /*position*/;
 top : /*position*/;
}
</style>
</head>
<body>
<nav><!-- basic navbar --></nav>
<article>
    <div>
        <div id="roomName">ROOM NAME</div>
        <div id="chair01"></div>
        <div id="chair02"></div>
        <div id="chair03"></div>
        <img id='background'>
    </div>
</article>
<script src="useful/jquery.min.js"></script>
<script>
var locations;
var date_times;
var i;
var text ='';
setInterval(() => {
    $.ajax({
      type: "POST",
      url: 'PHP/chair_stat.php',
      success: function(data,result) {
        $.each(data,function(key,item){
            locations = item.Location;
            date_times = item.Date_Time;
            if(locations.includes('chair01')){
                document.getElementById('chair01').style.backgroundColor="#00d61d";
            }
        });
        }
    });
  }, 1000);
</script>
    <script>
    document.getElementById('background').src='Resources/Pictures/MainBuilding/AllRooms.PNG';
    document.getElementById('background').style.width ='98%' 
    document.getElementById('background').style.border ='solid';
</script>
</body>
</html>


#室名{
宽度：8%；
身高：5%；
背景色：#ddd；
位置：固定；
边框：实心；
左：/*位置*/；
顶部：/*位置*/；
}
文章{
位置：相对位置；
浮动：对；
宽度：100%；
背景色：白色；
}
#主席01{
宽度：0.5%；
身高：0.5%；
背景色：#ddd；
位置：固定；
边框：实心；
左：/*位置*/；
顶部：/*位置*/；
}
#主席02{
宽度：0.5%；
身高：0.5%；
背景色：#ddd；
位置：固定；
边框：实心；
左：/*位置*/；
顶部：/*位置*/；
}
#主席03{
宽度：0.5%；
身高：0.5%；
背景色：#ddd；
位置：固定；
边框：实心；
左：/*位置*/；
顶部：/*位置*/；
}
房间名称
风险值位置；
var日期和时间；
var i；
var text=''；
设置间隔（（）=>{
$.ajax({
类型：“POST”，
url:'PHP/chair_stat.PHP'，
成功：功能（数据、结果）{
$。每个（数据、功能（键、项）{
位置=项目位置；
日期\时间=item.date\时间；
if（位置。包括（'01'））{
document.getElementById（'chair01'）.style.backgroundColor=“#00d61d”；
}
});
}
});
}, 1000);
document.getElementById（'background'）.src='Resources/Pictures/MainBuilding/AllRooms.PNG'；
document.getElementById（'background'）.style.width='98%
document.getElementById（'background'）.style.border='solid'；

PHP:

由于Loc
的值和您的id
是相同的，您可以使用$（“div[data id=“+locations.toLowerCase（）+”]）
和该div的背景色，直接在的每个循环中瞄准它。另外，使用数据id
代替id，并使用for loop
生成这些div
演示代码：

//假设数据如下所示
风险值数据=[{
Loc:“CH01”，
统计：“忙碌的头发”，
日期和时间：“2021-02-16 10:45:30”
},
{
Loc:“CH03”，
统计：“忙碌的头发”，
日期和时间：“2021-02-16 10:45:30”
}
]
$。每个（数据、功能（键、项）{
位置=项目位置；
$（“div[data id=“+locations.toLowerCase（）+”]）.css（“背景色”、“黄色”）；//更改数据id匹配的bg颜色
});

房间名01-03
1.
2.
3.
Hi，这里有什么不起作用呢？代码部分正在工作，只是感觉很奇怪。就像我不知道该怎么处理其他div的颜色一样。比如说，我会得到78把独特的椅子。我如何在不写if_else-if_else到处都是的情况下给reamining 77上色？你能显示json的输出吗？0:Object{Loc:“CH01”，Stat:“BusyChair”，Date_Time:“2021-02-16 10:45:30”，…} 1：对象{Loc:“CH02”，Stat:“BusyChair”，Date_Time:“2021-02-16 10:45:30”，…}因此这里Loc用于标识要着色的元素，并且该值与元素的id匹配？
<?php
require ('connect_to_db.php');

$sql = "SELECT * FROM actual_location_status WHERE Status='BusyChair' ORDER BY Date_Time";
$sql_param = mysqli_query($conn,"SELECT parameter_data FROM all_parameters WHERE name_of_parameter = 'Normal_Busy_Time'");
$row_param = mysqli_fetch_row($sql_param);

$time_left;
$time_left = $row_param[0];




$result = $conn->query($sql);
$gathered = [];
while ($row = $result->fetch_assoc()) {
    $gathered[] =$row;
}

header('Content-Type: application/json');
echo json_encode($gathered);

 ?>