Question

这里我创建了4个按钮。点击后，它应该改变颜色。我想要的是，当我点击第二个按钮时，我想要第一个按钮以及第二个按钮被着色。我该怎么办？

＆＃13;

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<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>
</head>

<body>
<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">
</body>
</html>

＆＃13;

Answer 1

尝试使用querySelector() .need在第二个按钮单击期间触发第一个按钮上的点击事件

<强>更新

添加了颜色untill点击元素

＆＃13;

$('.button').click(function() {
   var that =this;
  $('.button').each(function(){
  $(this).css('background-color', $(this).attr('data-color'));
    if(that == this){
   return false;
  }
  })
})

＆＃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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <input type="button" class="button" data-color="red" value="1">
  <input type="button" class="button" data-color="yellow" value="2">
  <input type="button" class="button" data-color="green" value="3">
  <input type="button" class="button" data-color="orange" value="4">
</body>

＆＃13;

点击第二个按钮，我想要第一个和第二个按钮被着色

1 个答案: