javascript Jquery - 根据数值更改跨度文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32158128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - Change span text color based on numeric value
提问by Neks
I'm trying to build a review system in WP with Advanced Custom Fields, but I can't solve this. I want to change the color of a score based on the number. For example: if the writer puts 0-40 as score it has to be changed to red; if the writer puts 40-60 it has to be changed to orange; if the writter puts 60-80 it has to be green...
我正在尝试使用高级自定义字段在 WP 中构建一个审核系统，但我无法解决这个问题。我想根据数字更改分数的颜色。例如：如果作者将 0-40 作为分数，则必须将其更改为红色；如果作者输入 40-60，则必须将其更改为橙色；如果作者输入 60-80，它必须是绿色的...
HTML:
HTML：
<div class="r-summary">
<span id="score">
<?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE
</span>
</div>
回答by Bitwise Creative
Fiddle: http://jsfiddle.net/5zdemo3j/
小提琴：http: //jsfiddle.net/5zdemo3j/
(change the score in the HTML section and "Run" to see changes)
（更改 HTML 部分中的分数并“运行”以查看更改）
$(function () {
// Score Color
var score = parseInt($('#score').text().trim());
var color = 'red';
if (!isNaN(score)) {
if (score >= 40) {
color = 'orange';
}
if (score >= 60) {
color = 'green';
}
$('#score').css('color', color);
}
});
回答by cн?dk
Use this function in document.readystate if you are loading the score with PHP so the span will be edited when the document is loaded:
document.ready如果您正在使用 PHP 加载乐谱，请在state 中使用此函数，以便在加载文档时编辑跨度：
$(document).ready(function() {
var score = parseInt($("#score").text());
if (score <= 40) {
$('#score').css('color', 'red');
} else if (score > 40 && score <= 60) {
$('#score').css('color', 'orange');
} else if (score > 60) {
$('#score').css('color', 'green');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-summary">
<span id="score">
50
</span>
</div>I used 50as a scoreexample here, and you can change it and see the results.
我用50一个score例子在这里，你可以改变它，看到的结果。
You will proceed like this:
你会像这样继续：
- Get the score from the span.
- According to the score value, change the color of the span.
- 从跨度中获取分数。
- 根据分数值，改变跨度的颜色。
回答by ooXei1sh
Something like this may work as well.
像这样的东西也可以工作。
<?php
function the_field() {
return htmlspecialchars('40-60');
}
?>
<html>
<head>
<style>
.red {
background: red;
}
.orange {
background: orange;
}
.green {
background: green;
}
</style>
</head>
<body>
<div class="r-summary">
<span id="score">
<?php echo the_field('score'); ?>
</span>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var $span = $('.r-summary').find('#score');
var score = $span.text().trim();
console.log(score);
switch(score) {
case '0-40':
$span.addClass('red');
break;
case '40-60':
$span.addClass('orange');
break;
case '60-80':
$span.addClass('green');
break;
}
});
</script>
</body>
</html>
回答by Ahmad Hassan
This is the solution.
这就是解决方案。
HTML:
HTML：
<div class="r-summary">
<span id="score">
75 <!--Value Printed by PHP-->
</span>
</div>jQuery:
jQuery：
$(document).ready(function(){
var score = $('#score').text();
if (score >= 0 && score <= 40)
{
$('#score').css('background-color','red');
}
else if (score > 41 && score <= 60)
{
$('#score').css('background-color','orange');
}
else if (score > 61 && score <= 80)
{
$('#score').css('background-color','green');
$('#score').css('color','white');
}
});Check out this fiddle!
看看这个小提琴！
回答by evrim oku
If you want to do it with native JS.
如果你想用原生JS来做。
(function () {
var scoreSpan = document.getElementById("score"),
score = parseInt(scoreSpan.innerHTML);
if (score != NaN) {
if (score >= 0 && score <= 40) {
scoreSpan.style.color = 'red';
} else if (score > 40 && score <= 60) {
scoreSpan.style.color = 'orange';
} else if (score > 60 && score <= 80) {
scoreSpan.style.color = 'green';
} else {
scoreSpan.style.color = 'black'; // or whatever you want as default
}
}
}());
回答by Gawad Azzam
try the below code
试试下面的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var score = parseInt($("#score").text(),10);
if(score >= 0 && score < 40){
$("#score").removeClass().addClass("redScore");
}else if(score >= 40 && score < 60){
$("#score").removeClass().addClass("orangeScore");
}else if(score >= 60 && score < 80){
$("#score").removeClass().addClass("greenScore");
}
});
</script>
<style>
.redScore{
color: #FF0000;
}
.orangeScore{
color: #FF9933;
}
.greenScore{
color: #33CC33;
}
</style>
</head>
<body>
<div class="r-summary">
<span id="score">
70
</span>
</div>
</body>
</html>
