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

Simple JS Fiddle demo

参考文献：

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 compat。

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

6 个答案: