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元素不是表单元素，则应使用text或html方法，另请注意，使用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");
    }

DEMO： 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");
        }
    })

DEMO： http://jsfiddle.net/muthkum/xC89P/5/

Answer 3

假设（由于您使用.val）.grade是文本输入字段，那么每次值更改时该字段都会更改颜色，请使用：

var pass = 75;

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

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

3 个答案: