html - 如何单独且排他地更改 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

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

I want each rating to have a different color

方法是为每个 button 元素提供我们希望的 style(例如使用类)。

示例代码片段:

<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>

---

switch back to white the button if other rating is selected.

如果我理解正确，所有 button 都应该有一个基本(或默认) 颜色和一些 Action (点击另一个按钮组，当前选定的将默认返回到它的基色，而单击的按钮应该根据其颜色突出显示)。

有两种方法 - 基于 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>