Question

在这里，我有3个字段 - temp，hum，number。在Temp字段中，我创建了四个按钮。我想要的功能是，当我点击第一个按钮时，第一个按钮应该是彩色的并存储一个值= ＆＃39; 1＆＃39;

同样当我点击第二个按钮然后我想要第一个，第二个按钮应该着色并存储一个值=＆＃39; 2＆＃39;。

当我点击第3个按钮然后我想要第1个，第2个，第3个按钮应该着色并存储值=＆＃39; 3＆＃39;。

当我点击第4个按钮时，我希望所有按钮都应该着色并存储值=＆＃39; 4＆＃39;。同样我想要哼哼数字字段。我可以做什么???。任何帮助都会有用!!!!!

＆＃13;

.button {
  background-color: white;
  border: 1px solid black;
  color: white;
  padding: 8px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  float: left;
}

＆＃13;

<div align='left'>Temp</div>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4">
<br><br>

<div align='left'>Hum</div>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4">
<br><br>

<div align='left'>number</div>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4">
<br><br>
<input type='submit' value='submit'>

＆＃13;

Answer 1

使用jquery更改每个按钮背景颜色

$("#Temp1").click(function() {
  $("#Temp4").css("background-color", "");
  $("#Temp3").css("background-color", "");
  $("#Temp2").css("background-color", "");
  $("#Temp1").css("background-color", "red");
  $("#temp").text(1);
});

$("#Temp2").click(function() {
  $("#Temp4").css("background-color", "");
  $("#Temp3").css("background-color", "");
  $("#Temp2").css("background-color", "yellow");
  $("#Temp1").css("background-color", "red");
  $("#temp").text(2);
});

$("#Temp3").click(function() {
  $("#Temp4").css("background-color", "");
  $("#Temp3").css("background-color", "green");
  $("#Temp2").css("background-color", "yellow");
  $("#Temp1").css("background-color", "red");
  $("#temp").text(3);
});

$("#Temp4").click(function() {
  $("#Temp4").css("background-color", "orange");
  $("#Temp3").css("background-color", "green");
  $("#Temp2").css("background-color", "yellow");
  $("#Temp1").css("background-color", "red");
  $("#temp").text(4);
});

.button {
  background-color: white;
  border: 1px solid black;
  color: white;
  padding: 8px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align='left'>Temp: <span id="temp"></span></div>
<input type="button" class="button" id="Temp1">
<input type="button" class="button" id="Temp2">
<input type="button" class="button" id="Temp3">
<input type="button" class="button" id="Temp4">
<br><br>

<input type='submit' value='submit'>

Answer 2

我只做过临时部分，你可以做同样的其他部分

我在html中做了一些更改，我已将id添加到输入标记并删除了onClick（）函数并添加到jQuery文件中。

<div align='left'>Temp</div>
<input type="button" class="button"  value="1" id="one">
<input type="button" class="button"  value="2" id="two">
<input type="button" class="button"  value="3" id="three">
<input type="button" class="button"  value="4" id="four">
<br><br>
</div>

的jQuery

$(document).ready(function(){
$("#one").click(function(){
$('#one').css('background-color','red');
alert('one');
$("#one").val()=1;
$("#one").attr('value', '1');
})
$("#two").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$("#one").attr('value', '2');
$("#two").attr('value', '2');
})

$("#three").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$('#three').css('background-color','green');
$("#one").attr('value', '3');
$("#two").attr('value', '3');
$("#three").attr('value', '3');
})

$("#four").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$('#three').css('background-color','green');
$('#four').css('background-color','grey');
$("#one").attr('value', '4');
$("#two").attr('value', '4');
$("#three").attr('value', '4');
$("#four").attr('value', '4');
})
});

点击按钮，我希望按钮被着色以及存储值

2 个答案: