如何单独和独占更改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 （使用类别，例如），我们希望。

示例代码段：

<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应该有一个基础（或默认）颜色并在一些行动（点击该组中的另一个按钮，当前选择将默认返回到它的基色 ，而点击button应该根据其颜色突出显示）。

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