Skip to main content
Operador <= en vez de >=
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
// 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 mayormenor 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);
                }
// 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 mayor 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);
                }
// 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);
                }
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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 mayor 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);
                }