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

下面我有一个简单的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>

jQuery（函数（$）{
$（“成本价格”）。在（“键控”，函数（）上{
var totalcost=$（“##_常规价格”）.val（）-$（this.val（）
$（“.total_cost”）.html（totalcost）；
})
})

您可以使用三元语句：

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

总成本<0$（“总成本”）.addClass（“负”）：$（“总成本”）.addClass（“正”）

它应该简单到：

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

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

$totalCost.html(totalCost);

var$totalCost=$（“.total_cost”）；
如果（总成本<0）{
$totalCost.removeClass（“绿色”）.addClass（“红色”）；
}否则{
$totalCost.removeClass（“红色”）.addClass（“绿色”）；
}
$totalCost.html（totalCost）；

您有一个.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");
});

$（“#成本#价格”）。在（“键控”，函数（）上{
var totalcost=$（“##_常规价格”）.val（）-$（this.val（）
$（“.total_cost”）.html（totalcost）；
如果（总成本<0）$（此）.addClass（“负”）；
else$（此）.removeClass（“负”）；
});

一种方法：

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

参考资料：

---

一种简单的方法是使用css3的attrib匹配和少量js将value属性发布到真实属性：

input[alt^='-']{color:red；}

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

---

在铬、ff和IE9中测试。使用onkeyup for IE8 compat。

谢谢您的回答。这似乎不起作用：在JavaScript和CSS中有一大堆错误，而不是$（这个）不应该是$（total_cost）@user2595441。属性是

color

，而不是

color

。其中一个颜色代码缺少

#

符号，类需要以

开头。否则，您将以不存在的名为

红色

和

绿色

的元素为目标。您还在

.html（）

调用中使用

totalCost

，但是您的变量被称为

totalCost

。看看这个，很抱歉。我已经检查了你更新的提琴，但它似乎同时添加了绿色和红色类，并且文本只会变为绿色，即使它是负数？@user2595441没问题。看来我的代码中有个bug。在添加新类之前，需要删除旧类。我已经更新了我的代码。太完美了！！非常感谢你的帮助！很抱歉我赶时间！：）这意味着将负类添加到mytextfield，而不是总成本。将类添加到要更改的内容并将其删除IMHO，该类应应用于正在修改的文本（在本例中为#mytextfield）

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

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