recherche

Maison  >  Questions et réponses  >  le corps du texte

Quand j'essaye de traduire l'élément via js ça ne marche pas

Tous les éléments avec la classe em doivent être affichés une fois à la fois en fonction de la note. J'ai rendu le conteneur emoji aussi grand que l'icône, donc avec le débordement masqué, un seul conteneur emoji peut être affiché. Le problème est que lorsque j'essaie de modifier les propriétés de transformation, cela ne fonctionne pas.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

const starsEl = document.querySelectorAll(".fa-star");

const ratingcEl = document.querySelectorAll(".em");

console.log(ratingcEl)

 

 

starsEl.forEach((starsEl, index) => {

  starsEl.addEventListener("click", () => {

    console.log('click')

    updateRating(index);

  });

});

 

function updateRating(index) {

  starsEl.forEach((starsEl, idx) => {

    if (idx <= index) {

      starsEl.classList.add("active");

    } else {

      starsEl.classList.remove("active");

    }

  });

 

 

  ratingcEl.forEach((ratingcEl) => {

    console.log(index)

    ratingcEl.style.transform = `translateX(- ${ 50 * index}px)`;

  });

 

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

.emoji-container {

  position: absolute;

  top: 20%;

  left: 50%;

  transform: translateX(-50%);

  width: 50px;

  height: 50px;

  border-radius: 50%;

  display: flex;

  overflow: hidden;

}

 

.emoji-container i {

  margin: 1px;

  transform: translateX(-200px);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<body>

  <div class="feedback-container">

    <div class="emoji-container">

      <i class="em fa-regular fa-face-angry fa-3x"></i>

      <i class="em fa-regular fa-face-frown fa-3x"></i>

      <i class="em fa-regular fa-face-meh fa-3x"></i>

      <i class="em fa-regular fa-face-smile fa-3x"></i>

      <i class="em fa-regular fa-face-laugh fa-3x"></i>

    </div>

 

    <div class="rating-container">

      <i class="fa-solid fa-star fa-2x "></i>

      <i class="fa-solid fa-star fa-2x "></i>

      <i class="fa-solid fa-star fa-2x "></i>

      <i class="fa-solid fa-star fa-2x "></i>

      <i class="fa-solid fa-star fa-2x "></i>

    </div>

  </div>

 

  <script src="emojii.js"></script>

 

 

</body>

Je souhaite que l'icône se déplace vers la gauche afin d'afficher le côté droit de la note.

P粉277305212P粉277305212378 Il y a quelques jours448

répondre à tous(1)je répondrai

  • P粉916553895

    P粉9165538952024-02-18 00:27:07

    Cela peut être grandement simplifié. Suppression de toutes les règles de position/transformation/affichage de CSS. Ils apportent une complexité inutile à une tâche aussi simple. Également ajouté de l'or pour les étoiles avec la classe active et commence avec 5 étoiles actives.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    const starsEl = document.querySelectorAll(".fa-star");

    const emoji = document.getElementById("emoji");

    const emojis = ["angry", "frown", "meh", "smile", "laugh"]; // just the changing parts

     

    starsEl.forEach((starsEl, index) => {

      starsEl.addEventListener("click", () => {

        updateRating(index);

      });

    });

     

    function updateRating(index) {

      starsEl.forEach((starsEl, idx) => {

        if (idx <= index) {

          starsEl.classList.add("active");

        } else {

          starsEl.classList.remove("active");

        }

      });

     

      emoji.classList = ["em fa-regular fa-face-" + emojis[index] + " fa-3x"];

    }

    1

    2

    3

    4

    5

    6

    7

    #rating-container > .active {

      color: gold;

    }

    #emoji-container {

      text-align: center;

      margin-top: 2rem;

    }

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer">

     

      <div id="feedback-container">

        <div id="rating-container">

          <i class="fa-solid fa-star fa-2x active"></i>

          <i class="fa-solid fa-star fa-2x active"></i>

          <i class="fa-solid fa-star fa-2x active"></i>

          <i class="fa-solid fa-star fa-2x active"></i>

          <i class="fa-solid fa-star fa-2x active"></i>

        </div>

        <div id="emoji-container">

          <i id="emoji" class="em fa-regular fa-face-laugh fa-3x"></i>

        </div>

      </div>

      sssccc

    répondre
    0
  • Annulerrépondre