jQuery-根据数值更改跨度文本颜色
[英]Jquery - Change span text color based on numeric value
问题描述
I'm trying to build a review system in WP with Advanced Custom Fields, but I can't solve this. 
我正在尝试使用高级自定义字段在WP中构建审阅系统，但是我无法解决此问题。 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; 例如：如果作者将0-40作为得分，则必须将其更改为红色； if the writer puts 40-60 it has to be changed to orange; 如果作者输入40-60，则必须更改为橙色； if the writter puts 60-80 it has to be green... 如果把点数放到60-80，那它必须是绿色的...
HTML: HTML：
<div class="r-summary">
<span id="score">
<?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE
</span>
</div>
6 个解决方案
解决方案1
6 已采纳 2015-08-22 16:13:40
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);
}
});
解决方案2
3 2015-08-22 16:40:16
Use this function in document.ready state if you are loading the score with PHP so the span will be edited when the document is loaded: 如果要用PHP加载乐谱，请在document.ready状态下使用此功能，以便在加载文档时编辑跨度：
$(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 50 as a score example 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. 根据得分值，更改跨度的颜色。
解决方案3
0 2015-08-22 16:18:11
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>
解决方案4
0 2015-08-22 16:20:57
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'); } });
解决方案5
0 2015-08-22 16:23:23
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
}
}
}());
http://jsfiddle.net/evrim/tmy74u46/ http://jsfiddle.net/evrim/tmy74u46/
解决方案6
0 2015-08-22 16:30:21
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.