change content color according to values in table

Question

change content color according to values in table

Navigation

#1 by (2 votes)

0

Someone can help me thank you

I get values in the format ex: 5/7 is the result of the score that the user registers and can view on the same screen, if I had only the number I believe that JS would take this in an int and it would be easy for my logic to rotate , but as we have there a bar the JS already turns to a string.

<td>
     <span class="placares">${listaResultados.placar1}/${listaResultados.placar2}</span>
     <span class="placares">${listaResultados.placar3}/${listaResultados.placar4}</span>
     <span class="placares">${listaResultados.placar5}/${listaResultados.placar6}</span>
     <span class="placares">${listaResultados.placar7}/${listaResultados.placar8}</span>
     <span class="placares">${listaResultados.placar9}/${listaResultados.placar10}</span>
 </td>

In my logic down here I get all these texts "5/7 or 6/3 and etc ..." and initially I need to remove this "/" separating these values and then compare them if the first number is larger I want this class "badge badge-warning" added and otherwise I want another badge.

<script type="text/javascript">
var spans = $(".placares");
spans.each(function(i, val) {
    var valores = getValores(val.textContent);
    if(valores.primeiroNumero > valores.segundoNumero) {
        $(val).removeAttr('').addClass('badge badge-info');
        return
    }
    if(valores.primeiroNumero < valores.segundoNumero) {
        $(val).removeAttr('').addClass('badge badge-warning');
        return
    }

})

function getValores(texto) {
    var split = texto.split('/');
    return {
        primeiroNumero: parseInt(split[0], 10),
        segundoNumero: parseInt(split[1], 10)
    };
}</script>

Anyone help me out on this JS? it does not work!!! I have no error in the browser console.

javascript html jquery css

asked by anonymous 18.12.2017 / 21:30

1 answer

Google chrome extension does not show default popup Mascara Javascript

score 2 · Accepted Answer

Your code is a little big for little things to do. I suggest the following code that will add the class according to the values in the spans and remove the class placares :

var spans = $(".placares");
spans.each(function(i, val) {
   var valores = val.textContent;
   valores = valores.split('/').map(Number);
   $(val).addClass(valores[0] > valores[1] ? 'badge badge-info' : 'badge badge-warning')
   .removeClass('placares');
});

See:

I put background just as an illustration:

var spans = $(".placares");
spans.each(function(i, val) {
   var valores = val.textContent;
   valores = valores.split('/').map(Number);
   $(val).addClass(valores[0] > valores[1] ? 'badge badge-info' : 'badge badge-warning')
   .removeClass('placares');
});

.badge-info{
   background: orange;
}

.badge-warning{
   background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td><spanclass="placares">5/7</span>
           <span class="placares">6/3</span>
           <span class="placares">2/1</span>
           <span class="placares">3/4</span>
           <span class="placares">7/4</span>
       </td>
   </tr>
</table>