我想在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>
PHP:
<?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);
?>
会发生什么
- 查看所有椅子的页面。(底色为灰色)
- 每秒请求数据，如果椅子很忙，必须将背景颜色重新设置为绿色。
- 有一个"Normal_Busy_Time"即01:30:00 (H-m-s)和"time_when_get_busy";例如:20121-02-16 11:45:30。当Time_When_Gets_Busy + Normal_Busy_Time通过时，我需要将div的背景重新着色为红色。我还没读到这里，因为前两部分让我卡住了。
我不需要一个完整的解决方案，我只需要一个路径。
问题:
- 我是否正确使用AJAX响应?(我的意思是我得到一个JSON obj，我解析为字符串)。
- 这个方法好吗?(我的意思是我的头脑已经在烦我这个解决方案是垃圾)
- 想法是欢迎的，我可以从头开始。(特别是如果有一种方法使我的代码看起来至少干净一点)。请记住，一个房间里有80把椅子，我必须照顾4个房间。
由于Loc和id的值相同，您可以直接使用$("div[data-id=" + locations.toLowerCase() + "]")和该div的背景色在each循环中定位。此外，使用data-id代替id，并使用for-loop生成这些div。
演示代码 :
//suppose data look like this
var data = [{
Loc: "CH01",
Stat: "BusyChair",
Date_Time: "2021-02-16 10:45:30"
},
{
Loc: "CH03",
Stat: "BusyChair",
Date_Time: "2021-02-16 10:45:30"
}
]
$.each(data, function(key, item) {
locations = item.Loc;
$("div[data-id=" + locations.toLowerCase() + "]").css("background-color", "yellow"); //change bg color where data-id matches
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
<div id="roomName"><b>RoomName 01-03</b></div>
<div data-id="ch01">1</div>
<div data-id="ch02">2</div>
<div data-id="ch03">3</div>
</article>