JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<table id="estrellas" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img class="negra" src="estrellaNegra" style="display:none;" />
            <img class="amarilla" src="estrellaAmarilla" />
        </td>
        <td>
            <img class="negra" src="estrellaNegra" style="display:none;" />
            <img class="amarilla" src="estrellaAmarilla" />
        </td>
        <td>
            <img class="negra" src="estrellaNegra" style="display:none;" />
            <img class="amarilla" src="estrellaAmarilla" />
        </td>
        <td>
            <img class="negra" src="estrellaNegra" />
            <img class="amarilla" src="estrellaAmarilla" style="display:none;" />
        </td>
        <td>
            <img class="negra" src="estrellaNegra" />
            <img class="amarilla" src="estrellaAmarilla" style="display:none;" />
        </td>
    </tr>
</table>

JavaScript

$(function() {

var rutaNegro = "http://www.teresabrazalez.com/wp-content/themes/amerifecta/img/star-logo.jpg";
var rutaAmarillo = "http://www.gifs.net/Animation11/Nature/Stars/golden_star.gif";

    var table = $("#estrellas"),
        encendidasInicio = 3, //esto es lo que vos tens en hidden, cuantas estan realmente en amarillo desde que arranca y no por el hover del usuario.
        prenderHasta = function(num) {
            var encendidos = table.find("td:lt(" + num + ")"),
                apagados = table.find("td:gt(" + (num - 1) + ")");
            
            encendidos.find("img.negra").hide();
            encendidos.find("img.amarilla").show();
            apagados.find("img.amarilla").hide();
            apagados.find("img.negra").show();
        };
    
    //Esto no lo tenes que copiar, es para no poner el pedazote de ruta en el HTML
    table.find("img").each(function() {
        if($(this).attr("src") == "estrellaNegra")
            $(this).attr("src", rutaNegro);
        else if($(this).attr("src") == "estrellaAmarilla")
            $(this).attr("src", rutaAmarillo);
    });
    
    
    table.hover(function() { }, function() {
        prenderHasta(encendidasInicio);
    });
    
    table.find("td").hover(function() {
        var eqThis = table.find("td").index($(this));
        
        prenderHasta(eqThis + 1);
    }, function() { }).click(function() {
        var eqThis = table.find("td").index($(this));
        alert("voto " + (eqThis + 1));
    });
  
});