在ajax上设置背景颜色，在mysql上设置条件值

Question

我只想在mysql数据中显示2种颜色的按钮和constion状态如果状态=1，按钮颜色=绿色如果状态=2，按钮颜色=红色

这是我的按钮代码

<?php
$query1 = mysqli_query($connect,"SELECT * FROM smt WHERE no <= 15");
while ( $data=mysqli_fetch_array($query1)){
$nostation = $data['no'];
$namastation = $data['name'];
$status = $data['status'];
?>
<div class='col-xs-2-2'>
<form method='post'>
<input type="hidden" value="2" id="status_<?=$nostation;?>" name="status">
<button type="submit" id="button_<?=$nostation;?>" data-id="<?=$nostation;?>" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;"><?php echo $namastation ?></b></button>
</form>
</div>
<?php } ?>

这是我用js编写的颜色代码，现在我可以用status值将颜色设置为all按钮无条件。有人能帮我吗？

<script type="text/javascript">
$(document).ready(function(){
$("[id^=button_]").css("background-color", "Red");
});
</script>

这是我的ajax代码，用于设置带有自动生成id 的多个按钮

<script>
$(document).ready(function(){           //when DOM is Ready.
$("[id^=button_]").click(function () {  //when Button is Clicked.
var id = $(this).data('id');       // Get the ID of the button that was clicked on.
var status = $("#status_"+id).val();   // value from `input` which is connected the clicked button.
// console.log(id+"---"+name);
$.ajax({                          // AJAX request
url: 'coba1.php',            // send request to server.
method: 'POST',               // method is POST.
data: {                       //data which is sent to server.      
id: id,status: status
},
function (data) {    //success function called.
// alert success data.
}
});
});

})；

如何添加代码来设置按钮颜色和条件？

Answer 1

您可以使用.each循环遍历表单，然后检查status输入是否具有值1或2，具体取决于此addClassred或green。此外，在此处添加您从数据库中获得的状态值，即：<input type="hidden" value="<?=$status;?>" id="status_<?=$nostation;?>" name="status">`

演示代码 :

//loop through each form
$("form").each(function() {
//find status value if 2 add class red or green
$(this).find("input[name=status]").val() == 2 ? $(this).find("[id^=button_]").addClass("red") : $(this).find("[id^=button_]").addClass("green")
})

.red {
background-color: red;
}
.green {
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-2-2'>
<form method='post'>
<input type="hidden" value="2" id="status_1" name="status">
<button type="submit" id="button_1" data-id="1" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Abc</b></button>
</form>
</div>
<div class='col-xs-2-2'>
<form method='post'>
<input type="hidden" value="1" id="status_2" name="status">
<button type="submit" id="button_2" data-id="2" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Xyz</b></button>
</form>
</div>
<div class='col-xs-2-2'>
<form method='post'>
<input type="hidden" value="2" id="status_3" name="status">
<button type="submit" id="button_3" data-id="3" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Mno</b></button>
</form>
</div>

此外，您也可以使用php代码执行同样的操作，只需检查$status值，并将值red或green分配给某个变量，然后将该变量添加到按钮class，即：

<?php
//yourcodes ..
$toadd;
while ($data = mysqli_fetch_array($query1)) {
$nostation = $data['no'];
$namastation = $data['name'];
$status = $data['status'];
//check status
if ($status == 2) {
$toadd = "red"; //assign value

} else {
$toadd = "green";
}
?>
<div class='col-xs-2-2'>
<form method='post'>
<input type="hidden" value="2" id="status_<?=$nostation; ?>" name="status">
//pass same value inside button class
<button type="submit" class="<?=$toadd; ?>" id="button_<?=$nostation; ?>" data-id="<?=$nostation; ?>" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;"><?php echo $namastation; ?></b></button>
</form>
</div>
<?php
} ?>

只需使用css：

.red {
background-color: red;
}
.green {
background-color: green;
}