change content color according to values in the table

Question

someone can help me thank you

I receive values in the format ex: 5/7 is the result of the scoreboard that the user registers and can view on the same screen, if I had only the number I believe that the JS would take this in an int and it would be easy my logic to run, but as we have a bar there 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’m taking all these texts "5/7 or 6/3 and etc..." and initially I need to take this "/" to separate these values and then compare them if the first number is higher I want this class "badge-Warning" added and otherwise 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>

Somebody help me with this JS? It doesn’t work!!! I have no error in browser console.

Answer 1

Your code is a little big for little thing to do. I suggest the following code that will add the class according to the values in 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');
});

Behold:

Placed 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>
           <span class="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>