正/負時更改輸出文本的顏色

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兼容。