1

Soy bastante novato en programación y tengo un problema a la hora de aplicar estilo CSS a un código HTML y me gustaría que me ayudaran. Resulta que recibo una respuesta en formato JSON con los datos de diferentes encuentros deportivos. Recorro este array donde existe un dato que es el nivel del partido y se muestra mediante 5 estrellitas. Según la forma que yo lo hago, si arrayPartido[0].nivel_partido es igual a 2 y por ejemplo arrayPartido[1].nivel_partido es igual a 4. Cuando estos dos partidos se muestran, se aplica a ambas el estilo de la última posición del array. (En este caso ambos encuentros aparecen con 4 estrellitas en amarillo, es decir, con el estilo aplicado). Esto lo entiendo pero no sé de qué forma hacerlo que se aplique el estilo según el caso.

Adjunto código

                for(var i=0; i<arrayPartido.length;i++){
                    arrayHTML+=
                    '<a class="font-a" href="index.php"><table class="tabla-st">'+
                     '<tr><td><p class="cel-left">'+
                     '<label id="nivel1">★</label>'+
                     '<label id="nivel2">★</label>'+
                     '<label id="nivel3">★</label>'+
                     '<label id="nivel4">★</label>'+
                     '<label id="nivel5">★</label></p></td><td>'+
                     '<p class="cel-right">Disponible</p></td></tr>'+
                     '<tr><td><p class="cel-left">'+arrayPartido[i].espacio_deportivo+'</p></td></tr>'+
                     '<tr><td><p class="cel-left">'+arrayPartido[i].direccion+'</p></td></tr>'+
                     '<tr><td><p class="cel-left">'+arrayPartido[i].fecha+'</p></td><td><p class="cel-right">'+arrayPartido[i].hora+'</p></td></tr>'+
                     '<tr><td><p class="cel-left"> Partido creado por: '+arrayPartido[i].usuario+'</p></td></tr>'+
                     '<tr><td><p class="cel-left"> ID evento: '+arrayPartido[i].idEvento+'</p></td></tr>'+
                     '</table></a>';

                     $('#partidoEncontrado').html(arrayHTML);
                     nivelJugador(arrayPartido[i].nivel_partido);
                }

Y este es el código de la función que aplica estilo:

function nivelJugador(nivel){
    if(nivel==1){
        $('#nivel1').css('color','#ecc300');
    }else if(nivel==2){
        $('#nivel1, #nivel2').css('color','#ecc300');
    }else if(nivel==3){
        $('#nivel1, #nivel2, #nivel3').css('color','#ecc300');
    }else if(nivel==4){
        $('#nivel1, #nivel2, #nivel3, #nivel4').css('color','#ecc300');
    }else if(nivel==5){
        $('#nivel1, #nivel2, #nivel3, #nivel4, #nivel5').css('color','#ecc300');
    }
};

La estructura del JSON

[{"usuario":"a","idEvento":"000007","deporte":"tenis","ciudad_evento":"Madrid","espacio_deportivo":"Canal de Isabel II","direccion":"C\/ Cea Berm\u00fadez 250","fecha":"2020-03-28","hora":"03:03:00","nivel_partido":"4"},{"usuario":"a","idEvento":"000005","deporte":"tenis","ciudad_evento":"Madrid","espacio_deportivo":"Patronato Deportivo Municipal","direccion":"C\/ Juego de Pelota 66","fecha":"2020-03-31","hora":"02:02:00","nivel_partido":"3"}]
8
  • Y cual es el error? Dices que los estilos se aplican no? Commented el 29 abr. 2020 a las 14:56
  • Si, pero siempre se aplica el estilo según la última posición del array. Me explico: si recibo de la base de datos 3 encuentros deportivos cuyo nivel_partido es por ejemplo 2, 3 y 4. Pues a estos tres encuentros deportivos, se les aplica el estilo correspondiente al último encuentro que recibo de la BBDD (en este ejemplo, 4). Por lo que las estrellitas de nivel de los tres encuentros serían iguales, en este caso, 4 estrellas se pondrán de color amarillo, evidentemente. Yo quiero que se pongan en amarillo. Encuentro 1: 2 amarillas. Encuentro 2: 3 amarillas. Encuentro 3: 4 amarillas.
    – Luis JM
    Commented el 29 abr. 2020 a las 15:05
  • Entiendo... ahora me queda más claro. Otra cosa, estas seguro que el parámetro que le estás pasando a la función nivelJugador es un número y no un string? Prueba parseando el valor cuando lo envías ;) Commented el 29 abr. 2020 a las 15:07
  • sí, es un entero entre 1 y 5.
    – Luis JM
    Commented el 29 abr. 2020 a las 15:08
  • Podrías compartir la estructura de arrayPartido? Commented el 29 abr. 2020 a las 15:09

1 respuesta 1

1

En esta propuesta quité la función donde cambias el estilo de las estrellas de acuerdo al nivel del partido y agregué otra que crea cada estrella con el estilo adecuado, que se va llamando dentro del ciclo. Por cierto, les cambié de ID a clase para tener un mejor HTML.

// En lugar de aplicar estilos después de crear el HTML
// generas las estrellas de acuerdo al nivel del partido
function obtenerNivel(nivel, nivelPartido) {
    // Si el nivel actual (1 a 5) es igual o menor al del partido, se aplica estilo
    // De lo contrario, se queda sin estilo
    let css = (nivel <= nivelPartido) ? ' style="color:#ecc300"' : '';
    return `<label class="nivel${nivel}"${css}>★</label>`;
}

for(var i=0; i<arrayPartido.length;i++){
                    arrayHTML+=
                    '<a class="font-a" href="index.php"><table class="tabla-st">'+
                     '<tr><td><p class="cel-left">'+
                     obtenerNivel(1, arrayPartido[i].nivel_partido) +
                     obtenerNivel(2, arrayPartido[i].nivel_partido) +
                     obtenerNivel(3, arrayPartido[i].nivel_partido) +
                     obtenerNivel(4, arrayPartido[i].nivel_partido) +
                     obtenerNivel(5, arrayPartido[i].nivel_partido) +
                     '</p></td><td>'+
                     '<p class="cel-right">Disponible</p></td></tr>'+
                     '<tr><td><p class="cel-left">'+arrayPartido[i].espacio_deportivo+'</p></td></tr>'+
                     '<tr><td><p class="cel-left">'+arrayPartido[i].direccion+'</p></td></tr>'+
                     '<tr><td><p class="cel-left">'+arrayPartido[i].fecha+'</p></td><td><p class="cel-right">'+arrayPartido[i].hora+'</p></td></tr>'+
                     '<tr><td><p class="cel-left"> Partido creado por: '+arrayPartido[i].usuario+'</p></td></tr>'+
                     '<tr><td><p class="cel-left"> ID evento: '+arrayPartido[i].idEvento+'</p></td></tr>'+
                     '</table></a>';

                     $('#partidoEncontrado').html(arrayHTML);
                }

3
  • Excelente respuesta y solución! Lo único que cambiaría es usar template String para que sea más fácil concatenar ;). Punto para la respuesta! Commented el 29 abr. 2020 a las 15:36
  • 1
    Genial, esta forma es perfecta para hacerlo. Se lo agradezco. Únicamente modificar let css = (nivel >= nivelPartido) ? ' style="color:#ecc300"' : ''; por let css = (nivel <= nivelPartido) ? ' style="color:#ecc300"' : ''; para que se aplique el estilo adecuadamente. Mil gracias
    – Luis JM
    Commented el 29 abr. 2020 a las 15:45
  • @LuisJM, tienes razón, ya lo corregí
    – Triby
    Commented el 29 abr. 2020 a las 15:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.