jquery - 根据百分比值更改 CSS 类

Question

Here's the latest JSFiddle .

HTML:

<table id="math-table">
    <tr>
           <td><input type="text" id="A1" name="A" value=""></td>
           <td><input type="text" id="B1" name="B" value=""></td>
           <td><input type="text" id="C1" name="C" readonly="readonly" tabIndex="-1" value=""></td>
      </tr>
</table> 

JS:

$("#math-table input").live("keyup", function(){
var id = this.id.match(/\d+/);
$("#C"+id).val( Math.round (($("#A"+id).val() / $("#B"+id).val()) * 100) + "%"  );

$('#A'+id).attr('value', $('#A'+id).val());  
$('#B'+id).attr('value', $('#B'+id).val());  
$('#C'+id).attr('value', $('#C'+id).val());  
});

var uniqueIds = $("#math-table tr").length;
$("#math-table input[id^='B']").live("change", function(){
var $thisRow = $(this).closest("tr"),
$clone = $thisRow.clone(),             // Clone row
$inputs = $clone.find("input").val("");// Reset values, return all inputs
uniqueIds++; //Increment ID
$inputs[0].id = "A" + uniqueIds;
$inputs[1].id = "B" + uniqueIds;
$inputs[2].id = "C" + uniqueIds;
$thisRow.after($clone);                    
});

您可以看到 A/B = C% 非常简单。我如何根据特定的百分比将不同的 CSS 类添加到 C 中？

红色 1-33%

绿色 34-66%

蓝色 67-100%

Answer 1

使用addClass , removeClass 函数来改变。如下所示:

$(".first").addClass("second") // add a class

$(".first").removeClass("second") // remove a class

只需将 C 值放入一个变量中，然后通过应用 if/else 根据您想要的 % 更改类