onclick on 3rd button，我希望第1，第2，第3个按钮变得有色。同样点击第4个按钮，我希望所有的按钮都变得有色。我怎么办？ [关闭]

i have 4 buttons. onclick on 3rd button i want 1st,2nd,3rd button get coloured.Similarly onclick on 4th button,i want all the buttons get coloured.And even i want to save a value when button is clicked.like when first button is clicked, a value '1' is stored in session variable.i have to pass this variable to php file.and similarly onclick on second button,a value '2' is to be stored and same for 3rd n 4th button.how can i do this?? any kind of help will be useful

 
<html>
<head>
<script type='text/javascript'>
function change(that){
that.style.backgroundColor = 'yellow';
document.querySelector('.button').click()
}

</script>
<style>
.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;
}
</style>
<body>
  <input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
  <input type="button" class="button" onclick="change(this)" value="2">
  <input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
  <input type="button" class="button" onclick="this.style.backgroundColor = 'blue';" value="4">
</body>
</html>

</div>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

dongzhiji0814 2017-07-15 19:19

关注

I do it with JQuery you need to modify the url to the php post to pass your variable value.

regards,

 
   <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript'>
  $(document).ready(function(){
    var buttonClicked = "";

    $("input").on('click', function(){

      var thisDiv = $(this).val();
      buttonClicked = thisDiv;
      var classToAdd = "";

      $.post("yourUrlToPost", { buttonClicked: buttonClicked});

      console.log(thisDiv);
      switch(thisDiv){
        case "1": classToAdd = "red";
          break;   
        case "2":
          classToAdd = "blue";
          break;
        case "3":
          classToAdd = "green";
          break;
        case "4":
          classToAdd = "yellow";
          break;
        default:
          break;
      };

      $("input").each(function(index,value){
        var actualClass = $(value).attr("class");
        if(index < thisDiv){
          $(value).addClass(classToAdd).removeClass(actualClass);
        }else{

          if(actualClass != "button"){
            $(value).addClass("button").removeClass(actualClass);
          }
          
        }

        
        
      });
      
    });
  });
</script>
<?php
  $_SESSION["buttonClicked"] = $_POST["buttonClicked"];
?>
<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: white;
  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;
}
.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;
}
</style>
<body>
  <input type="button" class="button" value="1">
  <input type="button" class="button" value="2">
  <input type="button" class="button" value="3">
  <input type="button" class="button" value="4">
</body>
</html>
</html>