根據百分比值更改CSS類

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％

來源

2012-01-03 user1040259

順便說一句，你真的應該把一個零分結果陷阱。 – Blazemonger 2012-01-03 21:46:09

通過不把代碼放在問題中，很明顯你不在乎這是否會讓其他人受益。 – 2012-01-03 22:03:55

@LightnessRacesinOrbit感謝您的建議。我現在就添加它。 – user1040259 2012-01-03 22:06:10

我更新您的jsfiddle：

http://jsfiddle.net/CzZxf/13/

我加了一個變量樂percent並設置基於在這樣的背景顏色：

if(percent>0 && percent<34) 
    $('#C'+id).addClass("red"); 
if(percent>33 && percent<67) 
    $('#C'+id).addClass("green"); 
if(percent>67) 
    $('#C'+id).addClass("blue");

編輯：我更新腳本從克隆刪除類。加上這個

$inputs = $clone.find("input").val("").removeClass();

來源

2012-01-03 21:51:49 Rondel

然而，我喜歡並理解這一點。在克隆上，前面添加的類也被克隆。有什麼辦法解決這個問題？謝謝。 – user1040259 2012-01-03 22:50:04

@ user1040259我更新了我的答案以擺脫該問題。 – Rondel 2012-01-03 23:14:33

@rodel謝謝你！ – user1040259 2012-01-03 23:25:33

它看起來像一個簡單的if - 基於C值否則，如果或switch語句。只需將C值存儲在變量中並進行測試即可。

只需使用addClass（http://api.jquery.com/addClass/）或removeClass（http://api.jquery.com/removeClass/）即可。

來源

2012-01-03 21:49:22 JohnJohnGa

使用addClass , removeClass函數進行更改。象下面這樣：。（「第一」）。

$（「第一」）addClass（「第二」）//添加類

$ removeClass（「第二」）//刪除
類

據％就拿一個變量，並改變類中的C值你想通過應用的if/else

來源

2012-01-03 21:49:24

做到這一點最明顯的方式：

var num = Math.round(($("#A" + id).val()/$("#B" + id).val()) * 100); 
$("#C" + id).val(num + "%"); 
if (num >= 0 && num <= 33) { 
    var cname = "alpha"; 
} else if (num > 33 && num <= 66) { 
    var cname = "beta"; 
} else if (num > 66 && num <= 100) { 
    var cname = "gamma"; 
} 
$('#C').removeClass().addClass(cname);

http://jsfiddle.net/mblase75/CzZxf/7/

來源

2012-01-03 21:49:47 Blazemonger

-1

檢查了這一點：http://jsfiddle.net/CzZxf/5/

這不完全使用了類，但它應該給你足夠的定製，以滿足您的需求：

$("#math-table input").live("keyup", function(){ 
    var id = this.id.match(/\d+/); 
    var result = Math.round (($("#A"+id).val()/$("#B"+id).val()) * 100); 
    var result_color = (result >=1 && result < 34) ? 'red' : (result >=34 && result < 67) ? 'green' : 'blue'; 

    $("#C"+id).val(result + "%" ).css('color', result_color); 

    $('#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; 
    //$inputs.eq(0).focus();      
    $thisRow.after($clone);      
});

來源

2012-01-03 21:50:33

根據百分比值更改CSS類

回答

相關問題