Question

我有4个按钮。 onclick on 3rd button我希望第1，第2，第3个按钮变得有色。同样在第4个按钮上点击，我希望所有按钮都变色。甚至我想在点击按钮时保存一个值。就像点击第一个按钮时一样值'1'存储在会话变量中。我必须将此变量传递给php文件。类似地点击第二个按钮，将存储值'2'并且第3个第4个按钮相同。我可以这样做吗？？任何形式的帮助都是有用的

 
<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>

Answer 1

如果您希望所有按钮具有相同的颜色，则可以在文档中引入新类，例如preg_match_all( '/picture (.*) and|one (.*) for/', $pat, $matches, PREG_PATTERN_ORDER));。您还必须为所有四个按钮提供ID。然后，为第3个按钮创建一个.colored-button事件监听器，将该类添加到前三个按钮，并为第四个按钮创建一个onclick事件监听器，将该类添加到所有四个按钮。这可以使用onclick的{{1}}方法完成。

要存储单击按钮的次数，您有两种方法：

为每个按钮创建一个jQuery字段，用于存储点击次数。这可以包含在addClass元素中，这样可以更轻松地提交数据。您可以在输入元素上设置input。您必须在按钮上添加form事件侦听器，以便在输入字段中设置值。
在按钮中添加type="hidden"属性，用于存储每个按钮被点击的次数，并在将数据提交给PHP之前检索此数据。如果您使用AJAX提交数据，这是一个更好的选择。通过向所有按钮添加onclick事件侦听器，可以增加点击次数。

Answer 2

我是用JQuery做的，你需要修改php帖子的url来传递你的变量值。

的问候，

＆＃13;

 
   <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>

＆＃13;

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

2 个答案: