我需要制作一个评级按钮组 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>
最佳答案
以下是有关如何处理此案例的一些意见:
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>
关于html - 如何单独且排他地更改 btn-group 颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40348593/