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

1 つのアプローチ:

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

シンプルな JS Fiddle デモ。

参考文献:

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

Answer 2

それを赤に設定する.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 3

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