Discussion :

[Matteo53]

Bonjour,
je fais encore appel à vos compétences, j'ai un système de notation avec des étoiles et une requête préparée qui fonctionne, j'ai du mal à construire la partie js et CSS et j'en suis au début. Je voudrais que quand on fait un mouseover sur une étoile les précédentes étoiles doivent aussi avoir la classe(ex. mousover sur la troisième étoile, la première deuxième et troisième deviennent rouges.
Mon code marche juste sur l'étoile que je pointe, pourtant j'ai essayé dans la console de remonter a l'élément parent de mon étoile puis aux enfants des éléments précédents du même niveau et il sélectionne bien le i précédent (le test je l'ai fais sans boucle avec star[3]...:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let previousStars = star.parentNode.previousElementSibling.childNodes;

Je pense que mon problème vient de la boucle while mais je trouve pas la solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = () => {
 
    //selectionner les etoiles
    const stars = document.querySelectorAll(".stars button i");
 
 
   //on boucle sur les etoiles pour ajouter un ecouteur d'evenement
        for(let star of stars) {
            star.addEventListener('mouseover', function() {
            star.classList.add('hover');
    //etoiles precedentes
            let previousStars = star.parentNode.previousElementSibling.childNodes;         
                while(previousStars) {
                previousStars.classList.add('hover');
                previousStars = previousStars.parentNode.previousElementSibling.childNodes
            }
            });
        }
}

mon formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="stars">
                <form action="" method="post">
                <button name="btnValueNote" class="disabled" type="submit" value="1"><i class="bi bi-star"></i></button>
                <button name="btnValueNote" class="disabled" type="submit" value="2"><i class="bi bi-star"></i></button>
                <button name="btnValueNote" class="disabled" type="submit" value="3"><i class="bi bi-star"></i></button>
                <button name="btnValueNote" class="disabled" type="submit" value="4"><i class="bi bi-star"></i></button>
                <button name="btnValueNote" class="disabled" type="submit" value="5"><i class="bi bi-star"></i></button>
                </form>
        </div>

merci pour votre aide.

[Doksuri]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const stars = document.querySelectorAll(".stars button i");
stars.forEach(star => {
star.addEventListener('mouseover', hoverStar);
star.addEventListener('mouseout', reset);
});
 
function hoverStar() {
	for(let i=0; i< stars.length; ++i) {
  	stars[i].classList.add('active');
    if(stars[i]===this) {
      return;
    }
	}
}
function reset() {
  stars.forEach(star => {
  	star.classList.remove('active');
  });
}

je me demande s'il n'existe pas une solution plus elegante en css pur (avec :has() et le voisin direct par exemple)

[Matteo53]

Bonjour,
je vous remercie pour votre aide j'ai testé votre script il y a juste un petit souci que j'avais rencontré hier : dans la boucle for le classList.add ne fonctionne pas par contre si je fais un
style.color="red" tout marche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function hoverStar() {
	for(let i=0; i< stars.length; ++i) {
  	stars[i].style.color="red";
    if(stars[i]===this) {
      return;
    }
	}
}
function reset() {
  stars.forEach(star => {
  	star.style.color="white";
  });
}

Au lieu d'utiliser une classe celle ci peut être aussi la solution
Pour bien comprendre ce code, pourriez vous m'expliquer cette condition (hier j'avais essayé la boucle for mais sans condition

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(stars[i]===this) {
      return;
    }

merci beaucoup pour votre aide

[Doksuri]

stars[i].classList.add('active'); j'ai oublie de precise que j'avais utilise un autre nom de class
=> tu as utilise un classe "hover", alors que moi, je l'ai apelle "active" (pour eviter la confusion dans le css entre .hover & :hover)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(stars[i]===this) {
      return;
    }

=> je boucle sur toutes les etoiles, mais on ne veux pas activer les etoiles "apres" celle qu'on survol... si on survol 3, on ne veut pas activer 4 ni 5 donc une fois qu'on arrive a l'etoile qu'on survol, j'arrete de boucler

[Matteo53]

Bonjour,
merci pour vos explications très claires, j'aurais du m'en apercevoir pour la class mais j'ai fais un copier coller du code.
je vous souhaite une bonne journée et encore merci