Question

我被要求对值进行小验证，如果值大于或小于0，我需要更改或添加/删除td和i标记的css

我的表看起来像这样

        <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

此处.slice将删除此代码中的％符号，其余代码将比较值并指定或删除类

var sdlyvar = $('#sdlyvar').text();   

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

Answer 2

使用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")
}

Answer 3

您的第一个问题是，由于最终的"-10.95%"符号，您无法将%之类的字符串与整数进行比较。您必须在值上使用parseFloat：

var sdlyvar = parseFloat($('#sdlyvar').text());

它将处理数字后面的所有非数字内容。

然后，您可能希望在更新时删除相反的类：

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

一些随机的建议：

在StackOverflow上发布时，明确代码中的错误
当使用jQuery多次引用元素时，请考虑将选择放在变量中，例如var $sdlyvar = $("sdlyvar");：更快地输入和执行。
在发布代码时保存一些空格：/

Answer 4

var lis=document.querySelectorAll("tr td i");
for(var i in lis){
    if(parseInt(lis[i].innerHTML)<0){
    lis[i].className+=" fa-level-down";
  }
  else{
        lis[i].className+=" fa-level-up";
  }
}

根据值更改<i> CSS

4 个答案: