Javascript JS条件更改类_Javascript_Jquery_Html_Css_Conditional Statements

Javascript JS条件更改类

javascript jquery html css

Javascript JS条件更改类,javascript,jquery,html,css,conditional-statements,Javascript,Jquery,Html,Css,Conditional Statements,我应该如何编写Javascript以根据显示的数字向ID策略添加新类（.indiceLow、indiceMedium、indiceHigh）它们应该如下所示：数字

我应该如何编写Javascript以根据显示的数字向ID策略添加新类（.indiceLow、indiceMedium、indiceHigh）

它们应该如下所示：

数字<50=.indiceLow
50<数字<100=.indicatemedium
数字>100=.indiceHigh

.indice{
背景色：#F5；
宽度：50%；
文本对齐：居中；
填充：10px；
}
.indiceLow{
背景色：#BBCF4C；
颜色：#fff；
}
五味子{
背景色：#EEC20B；
颜色：#fff；
}
.指示灯高{
背景色：#F29305；
颜色：#fff；
}


（数目）

您只需要

innerHTML/innerText

方法和一组条件。不需要jQuery

var el = document.getElementById('polIndice');
var val = parseInt(el.innerText);
var class_name;

if (val < 50) {
    class_name = 'indiceLow';
} else if (val < 100) {
    class_name = 'indiceMedium';
} else {
    class_name = 'indiceHigh';
}

el.className += ' ' + class_name;

var el=document.getElementById（'polIndice'）；
var val=parseInt（el.innerText）；
变量类名称；
如果（val<50）{
类别名称='indiceLow'；
}否则如果（val<100）{
类别名称='IndicateMedium'；
}否则{
class_name='indiceHigh'；
}
el.className+=''类名称；

我为您创建了一个函数，但我认为您并不真正需要它

function addIndice(elemId, num) {
    var classNam = ['indiceLow', 'indiceMedium', 'indiceHigh'];

    num = typeof(num) == "number" ? num : parseInt(num);

    var elem = document.getElementById(elemId);

    if(num < 50) {
        elem.className += " " + classNam[0];
    }else if(num >= 50 && num <= 100) {
        elem.className += " " + classNam[1];
    }else if(num > 100) {
        elem.className += " " + classNam[2];
    }
}

函数附加（elemId，num）{
var classNam=['indiceLow'，'indiceMedium'，'indiceHigh']；
num=typeof（num）=“number”？num:parseInt（num）；
var elem=document.getElementById（elemId）；
如果（数值<50）{
elem.className+=“”+classNam[0]；
}否则，如果（数值>=50&&num 100）{
elem.className+=“”+classNam[2]；
}
}

使用HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            .indice {
              background-color:#F5F5F5;
              width: 50%;
              text-align:center;
              padding:10px;
            }

            .indiceLow {
              background-color: #BBCF4C; 
              color:#fff;
            }
            .indiceMedium {
              background-color: #EEC20B;
              color:#fff;
            }
            .indiceHigh {
              background-color: #F29305;
              color:#fff;
            }
        </style>

    </head>
    <body>
        <div id="polIndice" class="indice"></div>

        <!-- Script at the end -->
        <script type="text/javascript" >
            function addIndice(elemId, num) {
                var classNam = ['indiceLow', 'indiceMedium', 'indiceHigh'];

                num = typeof(num) == "number" ? num : parseInt(num);

                var elem = document.getElementById(elemId);

                if(num < 50) {
                    elem.className += " " + classNam[0];
                }else if(num >= 50 && num <= 100) {
                    elem.className += " " + classNam[1];
                }else if(num > 100) {
                    elem.className += " " + classNam[2];
                }
            }

            addIndice('polIndice', 10);
        </script>
    </body>
</html>


测验
.印度{
背景色：#F5；
宽度：50%；
文本对齐：居中；
填充：10px；
}
.indiceLow{
背景色：#BBCF4C；
颜色：#fff；
}
五味子{
背景色：#EEC20B；
颜色：#fff；
}
.指示灯高{
背景色：#F29305；
颜色：#fff；
}
函数附加值（elemId，num）{
var classNam=['indiceLow'，'indiceMedium'，'indiceHigh']；
num=typeof（num）=“number”？num:parseInt（num）；
var elem=document.getElementById（elemId）；
如果（数值<50）{
elem.className+=“”+classNam[0]；
}否则，如果（数值>=50&&num 100）{
elem.className+=“”+classNam[2]；
}
}
附加（“polIndice”，10）；

到目前为止您尝试了什么？准备好文档，阅读元素的文本，让if/else if/else添加类。您可以从这里开始，谢谢，它非常适合我需要的内容。@elcid9:What if

num

将是

-1

<代码>50<代码>100？你的

或者{return false}

应该在你的代码中做什么？