javascript - 正/负时更改输出文本颜色

Question

我在下面有一个简单的 jQuery，它按预期工作。但是，我想更改它，因此如果数字为正，则变为绿色，如果为负，则变为红色。我知道 CSS 部分，所以样式不是问题。我只是不确定如何根据结果添加类。

<script type="text/javascript">
jQuery(function($) {
    $("#cost_price").on("keyup",function() {
        var totalcost= $("#_regular_price").val() - $(this).val() 
        $(".total_cost").html(totalcost);
    })
})
</script>

Answer 1

One approach:

$(".total_cost").html(totalcost).addClass(Math.abs(totalCost) === totalCost ? 'positive' : 'negative');

Simple JS Fiddle demo.

References:

• addClass().
• Math.abs().
• parseFloat().

Answer 2

一种简单的方法是使用 css3 的属性匹配，以及一点点 js 将value属性发布到真实属性：

 <style> input[alt^='-'] { color: red; } </style>
 <input oninput="this.alt=this.value"  />

如果值以“-”开头，则显示红色。您可以使用 type=number 和 min/max 属性来进一步改进用户界面。

在 chrome、ff 和 IE9 中测试。对 IE8 兼容使用 onkeyup。

Answer 3

您可以使用三元语句：

totalcost < 0 ? $(".total_cost").addClass("negative") : $(".total_cost").addClass("positive")

Answer 4

它应该很简单：

var $totalCost = $(".total_cost");

if(totalCost < 0) {
   $totalCost.removeClass("green").addClass("red");
} else {
   $totalCost.removeClass("red").addClass("green");
}

$totalCost.html(totalCost);

Answer 5

您有一个 .negative 类将其设置为红色，然后 Javascript 应用它与否

$("#cost_price").on("keyup",function(){
  var totalcost= $("#_regular_price").val() - $(this).val() 
  $(".total_cost").html(totalcost);
  if(totalcost < 0) $(this).addClass("negative");
  else $(this).removeClass("negative");
});

Answer 6

if(totalcost >= 0){
    if($(".total_cost").hasClass('red')
        $(".total_cost").removeClass('red');
    if(!$(".total_cost").hasClass('green')
        $(".total_cost").addClass('green');
}
else{
    if($(".total_cost").hasClass('green')
        $(".total_cost").removeClass('green');
    if(!$(".total_cost").hasClass('red')
        $(".total_cost").addClass('red');
}