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

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

您可以使用三元语句：

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

Answer 2

它应该很简单：

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

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

$totalCost.html(totalCost);

Answer 3

您有一个.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 4

一种方法：

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

简单的JS Fiddle演示 。

参考文献：

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

Answer 5

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');
}

Answer 6

一种简单的方法是使用css3的attrib匹配，以及一小部分js将value属性发布为真实属性 ：

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

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

在chrome，ff和IE9中进行了测试。 将onkeyup用于IE8兼容。