Javascript 颜色根据问题中列出的编号而变化

我写了一个if语句，表示如果数字小于50，则背景颜色为红色。如果数字为51-74，则为橙色；如果数字为75或以上，则为绿色。但是颜色不会根据值而改变，我不知道为什么。 以下是正在运行的站点： 这是密码 HTML

网站演示
项目62
项目55
项目77
项目66
项目88
项目22
项目22
项目22
项目22
项目22

JS

$（文档）.ready（函数（）{
$（“#链接”）。单击（函数（e）{
e、 preventDefault（）；//阻止默认锚功能
$（'#frontPage'）.hide（）；
frontPageRatings（）；
});
函数frontPageRatings（）{
var rowValue1=document.getElementByID（“Row1Rating”）；
var Value1=parseInt（rowValue1.innerHTML）；
var rowValue2=document.getElementByID（“Row2Rating”）；
var Value2=parseInt（rowValue2.innerHTML）；
var rowValue3=document.getElementByID（“Row3Rating”）；
var Value3=parseInt（rowValue3.innerHTML）；
var rowValue4=document.getElementByID（“Row4Rating”）；
var Value4=parseInt（rowValue4.innerHTML）；
var rowValue5=document.getElementByID（“Row5Rating”）；
var Value5=parseInt（rowValue5.innerHTML）；
var rowValue6=document.getElementByID（“Row6Rating”）；
var Value6=parseInt（rowValue6.innerHTML）；
var rowValue7=document.getElementByID（“Row7Rating”）；
var Value7=parseInt（rowValue7.innerHTML）；
var rowValue8=document.getElementByID（“Row8Rating”）；
var Value8=parseInt（rowValue7.innerHTML）；
var rowValue9=document.getElementByID（“Row9Rating”）；
var Value9=parseInt（rowValue7.innerHTML）；
var rowValue10=document.getElementByID（“Row10Rating”）；
var Value10=parseInt（rowValue7.innerHTML）；
如果（值149和值1 74）{
rowValue1.style.backgroundColor='#00CC00'；
}
如果（值249&&2 74）{
rowValue2.style.backgroundColor='#00CC00'；
}
如果（值349&&3 74）{
rowValue3.style.backgroundColor='#00CC00'；
}
如果（值449&&4 74）{
rowValue4.style.backgroundColor='#00CC00'；
}
如果（值549&&5 74）{
rowValue5.style.backgroundColor='#00CC00'；
}
如果（值649和值6 74）{
rowValue6.style.backgroundColor='#00CC00'；
}
如果（值749&&7 74）{
rowValue7.style.backgroundColor='#00CC00'；
}
}
});

您应该将所有

div

元素更改为使用

id

属性而不是

class

属性，然后使用

getElementById

访问这些元素。例如：

<th data-field="id">item<div id="Row2Rating">55</div></th>

---

类用于描述一组相似的元素，以相同的方式对它们进行样式设置，并使用

getElementsByClassName

查找共享该类的所有元素。

id

应该是唯一的标识符，并使用

getElementById

来选择唯一的元素。

您可以通过向每个要基于值着色的元素添加相同的类（例如评级）来大大简化代码

然后在jQuery中，您可以查询具有类评级的所有元素，并对它们进行交互

您的javascript将如下所示：

jQuery(document).ready(function ($) { 
    $('.rating').each(function(i, el) {
        var value = parseInt($(el).html(), 10);
        var color = getColor( value );
        $(el).css('background', color);
    });

    function getColor( value ) {
        var color = '#00CC00'; // value bigger than 74
        if(value < 50){
            color = '#900000';
        } else if(value > 49 && value < 75){
            color = '#FF9933';
        }  
        return color;
    }
});

jQuery（document）.ready（函数（$）{
$（'.rating'）。每个（功能（i，el）{
var value=parseInt（$（el）.html（），10）；
var color=getColor（值）；
$（el.css（'背景'，颜色）；
});
函数getColor（值）{
var color='#00CC00'；//值大于74
如果（值<50）{
颜色='90万'；
}否则如果（值>49&&值<75）{
颜色='#FF9933'；
}  
返回颜色；
}
});

工作示例：

用这个 一个简单的函数不需要写太多，
我修改了代码，并大幅减少了成本

$(document).ready(function () {
    $('#link').click(function(e) {
        e.preventDefault();// prevent the default anchor functionality
        $('#frontPage').hide();
        frontPageRatings();
    });
function frontPageRatings(){
    function getFirstCLS(elem){
        return document.getElementsByClassName(elem)[0];
    }
    function getHTML(CLASS){
        return parseInt(getFirstCLS(CLASS).innerHTML, 10);
    }
    function setCOLOR(CLASS, color){
        getFirstCLS(CLASS).style.backgroundColor = color;
    }
    function ifELSE(elem){
        if(getHTML(elem)<50){
            setCOLOR(elem, '#900000');
        } else if(getHTML(elem) >49 && getHTML(elem) <75){
            setCOLOR(elem, '#FF9933');
        } else if(getHTML(elem)>74){
            setCOLOR(elem, '#00CC00');
        }
    }
    ifELSE("Row1Rating");
    ifELSE("Row2Rating");
    ifELSE("Row3Rating");
    ifELSE("Row4Rating");
    ifELSE("Row5Rating");
    ifELSE("Row6Rating");
    ifELSE("Row7Rating");
    ifELSE("Row8Rating");
    ifELSE("Row9Rating");
    ifELSE("Row10Rating");
    }
});

$（文档）.ready（函数（）{
$（“#链接”）。单击（函数（e）{
e、 preventDefault（）；//阻止默认锚功能
$（'#frontPage'）.hide（）；
frontPageRatings（）；
});
函数frontPageRatings（）{
函数getFirstCLS（elem）{
返回单据.getElementsByClassName（elem）[0]；
}
函数getHTML（类）{
返回parseInt（getFirstCLS（CLASS）.innerHTML，10）；
}
函数setCOLOR（类，颜色）{
getFirstCLS（类）.style.backgroundColor=颜色；
}
函数ifELSE（elem）{
if（getHTML（elem）49和&getHTML（elem）74）{
设置颜色（元素“#00CC00”）；
}
}
ifELSE（“Row1Rating”）；
ifELSE（“Row2Rating”）；
ifELSE（“第3行评级”）；
ifELSE（“第4行评级”）；
ifELSE（“第5行评级”）；
ifELSE（“第6行评级”）；
ifELSE（“第7行评级”）；
ifELSE（“第8行评级”）；
ifELSE（“第9行评级”）；
ifELSE（“第10行评级”）；
}
});

我将它们全部更改为ID，但颜色仍然没有更改。为什么呢？我更新了代码并更新了您仍在使用的站点链接

getElementsByID

，它是复数形式。您需要使用单数形式的

getElementByID

。我没有看到，谢谢。我更新了上面的代码和站点链接，但这仍然是一个问题。好吧，你复制了很多超过7个的代码，它们都是一样的…应该是Id而不是Id，我的错。不过，总体来说，您应该考虑将其完全重写为一个可重用的函数，您可以调用该元素，而不是复制和粘贴代码10次

var rowValue2 = document.getElementById("Row2Rating");

jQuery(document).ready(function ($) { 
    $('.rating').each(function(i, el) {
        var value = parseInt($(el).html(), 10);
        var color = getColor( value );
        $(el).css('background', color);
    });

    function getColor( value ) {
        var color = '#00CC00'; // value bigger than 74
        if(value < 50){
            color = '#900000';
        } else if(value > 49 && value < 75){
            color = '#FF9933';
        }  
        return color;
    }
});

$(document).ready(function () {
    $('#link').click(function(e) {
        e.preventDefault();// prevent the default anchor functionality
        $('#frontPage').hide();
        frontPageRatings();
    });
function frontPageRatings(){
    function getFirstCLS(elem){
        return document.getElementsByClassName(elem)[0];
    }
    function getHTML(CLASS){
        return parseInt(getFirstCLS(CLASS).innerHTML, 10);
    }
    function setCOLOR(CLASS, color){
        getFirstCLS(CLASS).style.backgroundColor = color;
    }
    function ifELSE(elem){
        if(getHTML(elem)<50){
            setCOLOR(elem, '#900000');
        } else if(getHTML(elem) >49 && getHTML(elem) <75){
            setCOLOR(elem, '#FF9933');
        } else if(getHTML(elem)>74){
            setCOLOR(elem, '#00CC00');
        }
    }
    ifELSE("Row1Rating");
    ifELSE("Row2Rating");
    ifELSE("Row3Rating");
    ifELSE("Row4Rating");
    ifELSE("Row5Rating");
    ifELSE("Row6Rating");
    ifELSE("Row7Rating");
    ifELSE("Row8Rating");
    ifELSE("Row9Rating");
    ifELSE("Row10Rating");
    }
});