【发布时间】：2017-12-21 13:40:23
【问题描述】：
在输入我的温度、湿度、人数字段时，我希望我的速度 n 温度字段自动着色。就像当我输入温度 = 1，湿度 = 1，人数 = 1 时，单击 sumbit 按钮我想要速度 n 温度字段 -1st 框应该被着色。同样，在给出不同的输入时，我希望我的速度 n 温度框应该被着色。我该怎么办？？？？任何形式的帮助都会有用！
<html>
<frameset rows="50%,50%">
<frame name="top" src="k7.php"/>
<frame name="bottom" src="n3.html"/>
</frameset>
</html> 这是我的 k7.php 代码
<?php
session_start();
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( !empty( $_POST['bttn'] ) && !empty( $_POST['type'] ) ){
$type=$_POST['type'];
$bttn=$_POST['bttn'];
$_SESSION['buttonClicked'][ $type ]=$bttn;
exit( json_encode( $_SESSION['buttonClicked'] ) );
}
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Set Colours of Buttons</title>
<style>
.green{
background-color: green;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.blue{
background-color: blue;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.yellow{
background-color: yellow;
border: 1px solid black;
color: black;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.red{
background-color: red;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
input[type='button']{
border: 1px solid black;
padding: 8px 30px;
margin:0 0.25rem;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
</style>
<script>
(function(){
var colours={
1:'red',
2:'blue',
3:'green',
4:'yellow'
};
var flags={
passive:true,
capture:false
};
function setcolours(e){
var _class=this.dataset.class;
var col=this.parentNode.querySelectorAll('input[type="button"][data-class="'+_class+'"]');
/* Clear previous colour classes assigned */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* Add colour class to any element with a value equal to or less that selected button value */
for( var i=this.value; i > 0; i-- ){
try{
if( col[ i - 1 ].nodeType==1 )col[ i - 1 ].classList.add( colours[ col[ i - 1 ].value ] )
}catch( err ){
console.info( err );
continue;
}
}
ajax( this.value, this.dataset.type );
}
function ajax( value, type ){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
document.getElementById('results').innerHTML=this.response;
}
};
var params='bttn='+value+'&type='+type;
xhr.open( 'post', location.href, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
}
function bindEvents(e){
var col = document.querySelectorAll('input[type="button"]');
if( col && col.length > 0 ){
for( var n in col ){
if( col[ n ].nodeType==1 ){
col[ n ].addEventListener( 'click', setcolours.bind( col[ n ] ), flags );
}
}
}
}
document.addEventListener( 'DOMContentLoaded', bindEvents, flags );
}());
</script>
</head>
<body>
<div align="left">Temperature </div>
<input type="button" class="button" data-class='b' data-type='temperature' value="1">
<input type="button" class="button" data-class='b' data-type='temperature' value="2">
<input type="button" class="button" data-class='b' data-type='temperature' value="3">
<input type="button" class="button" data-class='b' data-type='temperature' value="4">
<br />
<br />
<div align="left">Humidity</div>
<input type="button" class="button1" data-class='b1' data-type='humidity' value="1">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="2">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="3">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="4">
<br />
<br />
<div align="left">Number of people </div>
<input type="button" class="button2" data-class='b2' data-type='people' value="1">
<input type="button" class="button2" data-class='b2' data-type='people' value="2">
<input type="button" class="button2" data-class='b2' data-type='people' value="3">
<input type="button" class="button2" data-class='b2' data-type='people' value="4">
<br />
<br />
<input type='submit' value='submit'>
</form>
<pre id='results'></pre>
</body>
</html>这是我的 n3.html 代码
<html>
<head>
<style>
.box1 {
width: 100px;
height: 45px;
margin: 0px;
padding: 0px;
float: left;
background-color:white;
border: 1px solid black;
}
</style>
</head>
<body>
<div align="left">Speed: </div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<br><br>
<br>
<div align="left">Temperature: </div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
</body>
</html>【问题讨论】：
-
用与您的问题无关的标签向问题添加垃圾邮件绝不是一个好主意。删除
java和jsp标签，因为您的问题中没有这些标签。看起来也与jquery无关。 -
请描述所有可能性。例如如果 temperature=1,Humidity=1,Number Of people=1 then Speed n Temperature field -1st box被着色.....................
-
@Jaydeep Mor。我的一些可能性是 1) 温度 = 1 湿度 = 2 人 = 2 然后速度 = 1,2 盒子应该着色 温度 = 1,2,3 盒子应该着色 2) 温度 = 1 湿度 = 2 人 = 4 然后速度 = 1,2,3,4 温度=1,2,3 盒子上色 3)温度=1 湿度=3 人=2 然后速度=1,2,3,4,5 温度=1,2,3 盒子上色4）温度=2 湿度=2 人=3 然后速度=1,2,3,4 温度=1,2,3 盒子上色 5）温度=3 湿度=4 人=3 然后速度=1,2,3 ,4,5 温度=1,2,3,4 盒子上色
标签： javascript php