Изменить класс CSS на основе значения процента

Question

Вот последняя версия 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") // добавить класс

$ (". First"). RemoveClass ("second") // удалить класс

Просто возьмите значение C внутри переменной и измените класс в соответствии с требуемым%, применив if / else

Answer 2

Я обновил ваш 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");

EDIT : Я обновил скрипт, чтобы удалить класс из клона.Добавить это

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

Answer 3

Проверьте это: 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);                    
});

Answer 4

Сделайте это наиболее очевидным способом:

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/

Answer 5

это выглядит как простой оператор if - else if или switch, основанный на значении C.Просто сохраните значение C внутри переменной и проведите тест.

Просто используйте addClass (http://api.jquery.com/addClass/) или removeClass (http://api.jquery.com/removeClass/).

)