1

tengo una funcion que hace un switch dependiendo de una puntuacion me cambia los svg de imagenes que tengo de estrellas para hacer un "rating", aqui en el ejemplo de codigo esta simplificado a solo esto pero realmente la idea es cojelo de una base de datos e comprobar la puntuacion cada vez que entras en la pagina (Esa parte ya esta hecha).

Por ejemplo, si el rating es 0.5 (Todo sobre cinco siempre):

let childs = document.getElementById("allstars").childNodes;
var rating = 0.5;

switch (rating) {

    case (0):
    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');
    break;

    case (0.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    childs[0].src = "../assets/half_star.svg";
                    
    break;

    case (1):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    childs[0].src = "../assets/full_star.svg";
    break;

    case (1.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    childs[0].src = "../assets/full_star.svg";
    childs[1].src = "../assets/half_star.svg";
    break;

    case (2):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 2; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    break;

    case (2.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 2; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    childs[2].src = "../assets/half_star.svg";
    break;

    case (3):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 3; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    break;

    case (3.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 3; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    childs[3].src = "../assets/half_star.svg";
    break;

    case (4):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 4; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    break;

    case (4.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 4; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    childs[4].src = "../assets/half_star.svg";
    break;

    case (5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/full_star.svg');
    break;

    default:
    console.log("No deberia estar aqui la verdad");
}
.star {
  width: 5%;
  filter: brightness(0) invert(1);
}
<div id="allstars">
  <img id="star_1" class="star" src="../assets/full_star.svg">
  <img id="star_2" class="star" src="../assets/full_star.svg">
  <img id="star_3" class="star" src="../assets/full_star.svg">
  <img id="star_4" class="star" src="../assets/full_star.svg">
  <img id="star_5" class="star" src="../assets/full_star.svg">
  <span style="font-size: 11px;"> (0.5/27)</span>
 </div>
Me deja todo con la imagen de las estrellas vacias por algun motivo.

Cuando lo ejecuto me suele salir por console.log que ha cambiado la imagen, pero si lo compruebo despues de salir de la misma me pisa los valores y pone el "empty_star.svg".

Lo que me muestra por consola:

Lo que me muestra la consola

Resultado:

Resultado

Y realmente tendria que acabar asi:

Resultado deseado

UPDATE:

Despues de probar la solucion de Pablo he visto que funciona pero por alguna razon los hijos se duplican. Ademas, los elementos desplazados no muestran ninguna imagen.

Captura consola: Captura node list

Pero en el codigo siguen habiendo los 4 por alguna razon desplazados

Captura codigo + desmostracion: introducir la descripción de la imagen aquí

Si cambio directamente los hijos 5 y 6 por ejemplo si que se muetra visualemente el cambio a las estrellas:

codigo estrellitas

2 respuestas 2

1

Imprimi la variable childs, fíjate que no solo tenes las imágenes, sino otros elementos de tipo "textnode" que se generan entre las etiquetas, eso esta afectándote en el switch en el momento de usar childs[0], childs[1], childs[3] etc. Solo tenes que usar children en lugar de childNodes:

let childs = document.getElementById("allstars").children;

Esto devolvera los nodos hijos de "allstars" que no son textnodes.

0

El problema es el siguiente:

let childs = document.getElementById("allstars").childNodes;

Aparte de que el plural de child es children, tenemos que tiene no 5 elementos sino 10, porque hay text nodes entre las imágenes.

Usando

const children = document.querySelectorAll('.allstars .star');

obtendrás realmente los elementos que necesitas.

Además, podrías simplificar el código haciendo algo como:

const rating = 0.5;


const children = document.querySelectorAll('.allstars .star');
children.forEach(el => el.src = '../assets/empty_star.svg');
const fullStars = Math.floor(rating);
const hasHalfStar = fullStars !== rating;

for (let i=0; i < fullStars; i++) {
    children[i].src = "../assets/full_star.svg";
}
if (hasHalfStar) {
    children[fullStars].src = "../assets/half_star.svg";
}
1
  • He probado a hacer esto y diria que funciona, pero he descubierto algo que me acaba de hacer perderme mucho, voy a hacer un update en la publicacion para que puedas verlo
    – Pchaozz
    Commented el 23 nov. 2022 a las 10:41

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.