Jquery - 根据数值

时间:2015-08-22 16:05:55

标签: javascript jquery html

我正在尝试使用高级自定义字段在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>

6 个答案:

答案 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
        }
    }
}());

http://jsfiddle.net/evrim/tmy74u46/

答案 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>