我正在尝试使用高级自定义字段在WP中构建审阅系统,但我无法解决此问题。我想根据数字改变分数的颜色。 例如:如果作者将0-40作为分数,则必须将其更改为红色;如果作者放40-60,则必须改为橙色;如果写作者放60-80就必须是绿色......
HTML:
<div class="r-summary">
<span id="score">
<?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE
</span>
</div>
答案 0 :(得分:6)
小提琴:http://jsfiddle.net/5zdemo3j/
(更改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);
}
});
答案 1 :(得分:3)
如果您使用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>
我在这里使用50
作为score
示例,您可以更改它并查看结果。
你会这样做:
答案 2 :(得分:0)
这样的事情也可以起作用。
var lights_array = [];
$.getJSON("resources/php/getjson.php",function(json){
var verajson = json;
var lights_obj = verajson.devices;
for (i = 0; i < verajson.devices.length; i++) {
var lights_ids = verajson.devices[i].id;
lights_array.push(lights_ids);
}
console.log(lights_array[9]); //I get on console the value of the index 9 on the console
});
console.log(lights_array[9]); //I get an "underfined" here
答案 3 :(得分:0)
这是解决方案。
HTML:
<div class="r-summary">
<span id="score">
75 <!--Value Printed by PHP-->
</span>
</div>
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');
}
});
查看此fiddle!
答案 4 :(得分:0)
如果你想用原生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
}
}
}());
答案 5 :(得分:0)
尝试以下代码
<!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>