根据值更改 CSS
我被要求对值进行小的validation，如果值大于或小于0，我需要更改或添加/删除td和i标签的css
我的表看起来像这样
Year Weeks VAR (%) -10.65% VAR (diff) -13,953 VAR (%) 8.81% VAR (diff) 11,320
目前我很难对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"); }
使用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") }
您的第一个问题是，由于最终的%符号，您无法将"-10.95%"类的字符串与整数进行比较。 您必须在tha值上使用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");：更快地输入和执行。 - 发布代码时保存一些空格：/
这里.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"); }
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"; } }