使多个单击的按钮更改颜色答案

【问题标题】：Make more than one clicked button change color使多个单击的按钮更改颜色
【发布时间】：2016-07-19 02:25:39
【问题描述】：

假设我有 10 个红色按钮。我希望他们在单击后将颜色更改为蓝色，并且无论我在哪里单击后都保持蓝色。现在我使用 :active 以及它的作用，它只会改变最近点击按钮的颜色，并在我点击其他任何内容后恢复原始颜色。

但我希望我页面上所有点击的按钮都变成改变的颜色。我该怎么做？

【问题讨论】：

【解决方案1】：

你可以像这样用 jQuery 做到这一点：

$(function() {
  $('button').click(function() {
    $(this).addClass('blue');  
  });
});

button {
  color:red;
}
  button.blue {
    color:blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>

【讨论】：

【解决方案2】：

要在 CSS 中实现这一点，您需要使用一些涉及 transition-delay 属性的技巧；在按钮的正常状态下，将其设置为一个高得离谱的数字，然后在按钮的活动状态下将其重置为0s。

button{
    background:red;
    transition:background .25s linear 999999s;
}
button:active{
    background:blue;
    transition-delay:0s,
}

【讨论】：