javascript - 根据值更改 <td> <i> CSS

Question

我被要求对值实现一个小验证，如果值大于或小于 0，我需要更改或添加/删除 td 和 i 标签的 css

我的 table 看起来像这样

        <table class="table table-hover" id="studentweek">
            <thead>
                <tr>
                    <th>Year</th>
                    <th">Weeks</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>VAR (%)</td>
                    <td class="text-warning"> <i class="classname">-10.65%</i></td>
                </tr>
                <tr>
                    <td>VAR (diff)</td>
                    <td class="text-warning"> <i class="classname">-13,953</i></td>
                </tr>
                <tr>
                    <td>VAR (%)</td>
                    <td class="text-navy"> <i class="classname">8.81%</i></td>
                </tr>
                <tr>
                    <td>VAR (diff)</td>
                    <td class="text-navy"> <i class="classname">11,320</i></td>
                </tr>
            </tbody>
        </table>

目前我正在对 css 进行硬编码，但我希望能够在值自动更改时动态更改这些内容，有人可以建议最好的存档方法吗？

我在我的 Ajax 请求中想做这样的事情:

var sdlyvar = $(parseFloat(".classname").text());

if (sdlyvar < 0){
    $('.classname').removeClass(".classname").addClass("fa-level-down");
} else {
    $('.classname').removeClass(".classname").addClass("fa-level-up");
}

Answer 1

使用 JavaScript parseFloat 来解析百分比 ( http://www.w3schools.com/jsref/jsref_parsefloat.asp )。

var percent = $('#sdlyvar').text();
var result = parseFloat(percent) / 100.0;

if (result < 0){
    $('#sdlyvar').removeClass("fa-level-up");
    $('#sdlyvar').addClass("fa-level-down")
} else {
    $('#sdlyvar').removeClass("fa-level-down");
    $('#sdlyvar').addClass("fa-level-up")
}