如何单独且唯一地更改 btn-group 颜色？

Question

我需要制作一个评分按钮组 0 到 5，并且只更改所选评分的颜色（我希望每个评分有不同的颜色），如果选择了其他评分，则将按钮切换回白色。

    <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" class="btn btn-default">0</button>
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
        <button type="button" class="btn btn-default">4</button>
        <button type="button" class="btn btn-default">5</button>
    </div>

Answer 1

以下是有关如何处理此案例的一些意见：

我希望每个评分都有不同的颜色

方法是为每个button 元素赋予我们希望的style（以类为例）。

示例代码sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="btn-group" role="group" aria-label="..." id="Rating">
  <button type="button" class="btn btn-default">0</button>
  <button type="button" class="btn btn-default btn-primary">1</button>
  <button type="button" class="btn btn-default btn-success">2</button>
  <button type="button" class="btn btn-default btn-info">3</button>
  <button type="button" class="btn btn-default btn-warning">4</button>
  <button type="button" class="btn btn-default btn-danger">5</button>
</div>

---

如果选择了其他评级，则将按钮切换回白色。

如果我理解正确，所有button 都应该有一个基础（或默认）颜色，并且在一些动作（点击组中的另一个按钮，当前选择的会默认回到它的 base color，而点击 button 应该 highlight 基于它的颜色）。

有两种方法 - 基于JavaScript 或仅CSS。

---

各有利弊

基于 JavaScript：易于维护、可读。

基于 CSS 的：代码较多，可维护性较难（基于组中按钮的数量）。

---

这是一个示例 JavaScript 方法：

$(".btn-group > button").on("click", function() {

  var defaultClass = "btn btn-default";
  var toBeAssignedClass = $(this).attr("data-btn-class");

  $(".btn-group > button").attr("class", defaultClass);
  $(this).attr("class", toBeAssignedClass);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="btn-group" role="group" aria-label="..." id="Rating">
  <button type="button" class="btn btn-default" data-btn-class="btn btn-default">0</button>
  <button type="button" class="btn btn-default" data-btn-class="btn btn-primary">1</button>
  <button type="button" class="btn btn-default" data-btn-class="btn btn-success">2</button>
  <button type="button" class="btn btn-default" data-btn-class="btn btn-info">3</button>
  <button type="button" class="btn btn-default" data-btn-class="btn btn-warning">4</button>
  <button type="button" class="btn btn-default" data-btn-class="btn btn-danger">5</button>
</div>

---

这是一个示例 CSS 方法：

div.btn-group > button[data-rating='1']:hover,
div.btn-group > button[data-rating='1']:focus, 
div.btn-group > button[data-rating='1']:active, 
div.btn-group > button[data-rating='1'].active {
  background-color: #265a88;
  background-image: linear-gradient(to bottom, #fff 0, #265a88 100%);
}
div.btn-group > button[data-rating='2']:hover,
div.btn-group > button[data-rating='2']:focus, 
div.btn-group > button[data-rating='2']:active, 
div.btn-group > button[data-rating='2'].active {
  background-color: #419641;
  background-image: linear-gradient(to bottom, #fff 0, #419641 100%);
}
div.btn-group > button[data-rating='3']:hover,
div.btn-group > button[data-rating='3']:focus, 
div.btn-group > button[data-rating='3']:active, 
div.btn-group > button[data-rating='3']:hover:active {
  background-color: #2aabd2;
  background-image: linear-gradient(to bottom, #fff 0, #2aabd2 100%);
}
div.btn-group > button[data-rating='4']:hover,
div.btn-group > button[data-rating='4']:focus,
div.btn-group > button[data-rating='4']:active,
div.btn-group > button[data-rating='4']:hover:active {
  background-color: #eb9316;
  background-image: linear-gradient(to bottom, #fff 0, #eb9316 100%);
}
div.btn-group > button[data-rating='5']:hover,
div.btn-group > button[data-rating='5']:focus,
div.btn-group > button[data-rating='5']:active,
div.btn-group > button[data-rating='5']:hover:active {
  background-color: #c12e2a;
  background-image: linear-gradient(to bottom, #fff 0, #c12e2a 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="btn-group" role="group" aria-label="..." id="Rating">
  <button type="button" class="btn btn-default" data-rating="0">0</button>
  <button type="button" class="btn btn-default" data-rating="1">1</button>
  <button type="button" class="btn btn-default" data-rating="2">2</button>
  <button type="button" class="btn btn-default" data-rating="3">3</button>
  <button type="button" class="btn btn-default" data-rating="4">4</button>
  <button type="button" class="btn btn-default" data-rating="5">5</button>
</div>