[英]Put color on top of div background? (aka change color of div without changing 'background-color' value)
[英]Change div background color with database value
如何在不同的下拉菜單選擇中更改數據庫值的<div>
背景色? 我認為自己進行了廣泛的搜索,並且從以前的帖子中發現了一些很棒的信息,但是還不能完全融入我的代碼中。
這是我的任務 :我有一個包含各種溫度的下拉列表。 每個臨時數據庫中都有一個特定的顏色代碼,以便分配給<div>
。
例如99度會給我黃色背景,而105度會給我橙色背景。
這是當前代碼:下拉菜單頁面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Alert Test</title>
<meta/>
</head>
<body>
<p>
Page copy
</p>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction_1(){
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Oops! We apologize.");
return false;
}
}
}
ajaxRequest.onreadystatechange = function (){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv_4');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var temp = document.getElementById('temp').value;
var queryString = "?temp=" + temp;
ajaxRequest.open("GET", "abc.php"+ queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form>
<br />
<select id='temp'>
<option value=''>Choose Product</option>
<option value='90'>90</option>
<option value='91'>91</option>
<option value='92'>92</option>
<option value='93'>93</option>
<option value='94'>94</option>
<option value='95'>95</option>
<option value='96'>96</option>
<option value='97'>97</option>
<option value='98'>98</option>
<option value='99'>99</option>
<option value='100'>100</option>
<option value='101'>101</option>
<option value='102'>102</option>
<option value='103'>103</option>
<option value='104'>104</option>
<option value='105'>105</option>
<option value='106'>106</option>
<option value='107'>107</option>
<option value='108'>108</option>
<option value='109'>109</option>
<option value='110'>110</option>
<option value='111'>111</option>
<option value='112'>112</option>
<option value='113'>113</option>
</select>
<input type='button' onclick='ajaxFunction_1()' value='Select' />
</form>
<div id='ajaxDiv_4'></div>
</body>
</html>
這是調用數據庫的代碼
<?php
include_once('conn.php');
// Retrieve data
if( isset($_GET['temp']) && $_GET['temp'] != '' ){
$temp = $_GET['temp'];
$temp = mysql_real_escape_string($temp);
//query
$query = "SELECT * FROM temps WHERE temp = '$temp'";
//Execute
$qry_result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($qry_result)){
$display_string = '<strong>WARNING</strong> '.$row['alert'].'<br>';
$display_string .= '<strong>BE AWARE</strong> '.$row['messa'].'<br>';
$display_string .= '<strong>RESPONSE</strong> '.$row['action'].'<br>';
$display_string .= '<br>';
}
echo $display_string;
} else {
return null;
}
?>
下拉菜單和頁面效果很好。 只需添加一些顏色即可完成。 在此先感謝您的幫助。
與其在用戶更改下拉菜單時進行AJAX調用,不如用已知的顏色呈現option
元素,例如:
<option value='104' data-color='yellow'>104</option>
然后,在點擊處理程序中,您可以從那里獲取值。
我通常這樣做的方式是將css和jquery混合在一起,我為溫度定義了css類,例如:
.temp1{background-color: red}
.temp2{background-color: blue}
然后在獲取溫度后,javascript和jquery使用addClass()
和removeClass()
函數執行其余操作,並具有一些邏輯:
if(temprature>90)temp=1;
else if(temprature>75)temp=2;
$('ajaxDiv_4').addClass('temp'+temp);
或將while循環替換為此:
if($temp>100)$class = temp1;
else if($temp>80)$class = temp2;
else $class = temp3;
while($row = mysql_fetch_array($qry_result)){
$display_string = '<strong class='.$class.'>WARNING</strong> '.$row['alert'].'<br/>';
$display_string .= '<strong class='.$class.'>BE AWARE</strong> '.$row['messa'].'<br/>';
$display_string .= '<strong class='.$class.'>RESPONSE</strong> '.$row['action'].'<br/>';
$display_string .= '<br/>';
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.