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"}]