javascript - 如果等级低于 75，则将颜色变为红色

Question

我需要有关 jQuery 的帮助。我怎样才能将 74 的字体颜色变为红色。我的意思是一旦等级低于 75，字体颜色将变为红色，如果通过，则变为绿色。

$("document").ready( function(){

 //alert("working");

var passing_grade = parseInt("75");
var grade = parseInt($(".grade").val());

    if( grade < passing_grade ){
        $(".grade").css("color","#ff000");
    } else {
        $(".grade").css("color","#066d06");
}


} ); 

Answer 1

val方法用于获取/设置表单元素的值，如果.grade元素不是表单元素，则应使用textorhtml方法，还要注意何时parseInt使用，应指定radix.

$(document).ready( function(){
    $(".grade").css("color", function() {
        return parseInt(this.value, 10) > 75 ? "#ff0000" : "#066d06"
    })
}); 

---

对于li元素，您应该使用text方法而不是val：

return parseInt($(this).text(), 10) > 75 ? "#ff0000" : "#066d06"

http://jsfiddle.net/wsBBH/

Answer 2

问题是红色的颜色代码不正确。对于红色，它是#ff0000（这是一个错字，您错过了添加另一个零。）

试试这个代码，

var passing_grade = parseInt("75");
var grade = parseInt($(".grade").val());

    if( grade < passing_grade ){    
        $(".grade").css("color",'#ff0000');  // <<< Change the color code HERE
    } else {
        $(".grade").css("color","#066d06");
    }

演示：http: //jsfiddle.net/muthkum/xC89P/3/

更新：

试试这段代码，你需要循环每个.grade元素并应用 CSS

    var passing_grade = parseInt("75");

    $(".grade").each(function(){
       var grade = parseInt($(this).text());

        if( grade < passing_grade ){    
            $(this).css("color",'#ff0000');
        } else {
            $(this).css("color","#066d06");
        }
    })

演示：http: //jsfiddle.net/muthkum/xC89P/5/

​</p>

Answer 3

假设（因为您使用.val）这.grade是一个文本输入字段，那么要让该字段在每次值更改时更改颜色，请使用以下命令：

var pass = 75;

$('.grade').on('change', function() {
    var grade = parseInt(this.value, 10);
    $(this).css('color', grade < pass ? '#ff0000' : '#066d06');
});