Question

点击时我需要帮助让多个按钮改变颜色，再次点击时返回上一个颜色。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .choices{
      background-color:#F0F3F4;
      padding:15px 32px;
      display:inline-block;
      font-size:16px;
      font-family:century gothic;
      font-weight:bold;
      margin:6px 4px;
      cursor:pointer;
      border-radius:12px;
      border:2px solid #5D6D7E;
    }

    .choices:hover{
      background:#D0D3D4;
    }
  </style>
  <script>

  </script>
</head>
<body>
  <div>
    <button class="choices" type="button" id="button" >Grapes</button>
    <button class="choices" type="button" id="button">Bananas</button>
    <button class="choices" type="button" id="button">Strawberries</button>
    <button class="choices" type="button" id="button">Apples</button>
  </body>
</html>

我对javascript没有超级经验，所以我想我需要帮助弄清楚如何使用javascript来解决问题。

Answer 1

也许你想使用复选框html输入标签而不是按钮

<input type="checkbox" id="grapes" value="grapes" name="fruit"/>
<label for="grapes">
    <div class="choices">Grapes</div>
</label>

根据您的要求，这是一种javascript方法。

<button class="choices" onClick="buttonClick(this)">Grapes</button>
<script>
    function buttonClick(element){
        element.classList.toggle('active');
    }
</script>

然后，您可以在按钮处于活动状态时将活动类设置为您想要的任何样式

Answer 2

这是您正在寻找的工作示例：

https://jsfiddle.net/zsydyc/cxkp0r4f/

有些说明： 1.你的html中不应该有重复的id 2.我在你的html中添加了数据颜色以存储颜色，但你也可以将颜色添加到JS

JS看起来像这样：

$(document).ready(function(){
var background_color = "white"; //white by default
var pre_color = "";
var cur_color = "";
$(".choices").click(function(){
    var cur_color = $(this).attr('data-color');
if (cur_color != background_color){ //first time click or click on a different button
  pre_color = background_color;
  background_color = cur_color;  
  //change body background as an example
  $('body').css("background", background_color);
}
else{ //second time click
    $('body').css("background", pre_color);

}
})
})

Answer 3

正如丹尼尔所说，你想要实现的目标可以通过使用复选框完成，你可以使它看起来像一个盒子（没有任何刻度线）。你不需要任何javascript，并且应该避免使用css。

的CSS：

while (num >= 1) {
  console.log('...');  // left as an exercise for you to fill in the required function call and string concatenations.
  num--;  // same thing as num = num - 1;
}

HTML：

.choices{
  background-color:#F0F3F4;
  padding:15px 32px;
  display:inline-block;
  font-size:16px;
  font-family:century gothic;
  font-weight:bold;
  margin:6px 4px;
  cursor:pointer;
  border-radius:12px;
  border:2px solid #5D6D7E;
}

.choices:hover{
  background:#D0D3D4;
}
input:checked+label>choices {
  background: red;
}

input{
  display: none
}
input:checked+label>.choices {
  background-color: red !important;
}

请参阅https://codepen.io/jogind3r/pen/MrEOaN

单击时更改多个按钮颜色

3 个答案: