单击时更改多个按钮颜色[重复]

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

正如 Daniel 所提到的，您想要实现的事情可以通过使用复选框来完成，您可以让它看起来像一个框（没有任何刻度线）。你不需要任何 javascript，当你可以用 css 做时应该避免。

css:

.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;
}

html:

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

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

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

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


</body>

</html>

见https://codepen.io/jogind3r/pen/MrEOaN

Answer 2

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

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

一些注意事项： 1. 你的 html 中不应该有重复的 id 2.我在你的html中添加了data-color来存储颜色，但是你也可以把颜色放到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

也许您想使用复选框 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>

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