suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wenn ich versuche, das Element über js zu übersetzen, funktioniert es nicht

Alle Elemente mit der Klasse em müssen je nach Bewertung einmal angezeigt werden. Ich habe den Emoji-Container so groß wie das Symbol gemacht, sodass bei ausgeblendetem Überlauf nur ein Emoji-Container angezeigt werden kann. Das Problem ist, dass es nicht funktioniert, wenn ich versuche, die Transformationseigenschaften zu ändern. 

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

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

Ich möchte, dass das Symbol nach links geschwenkt wird, sodass die rechte Seite der Bewertung angezeigt wird.

P粉277305212P粉277305212349 Tage vor429

Antworte allen(1)Ich werde antworten

  • P粉916553895

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

    这可以大大简化。从 CSS 中删除了所有位置/变换/显示规则。它们为如此简单的任务带来了不必要的复杂性。还为带有 active 类的星星添加了金色，并从 5 个活跃星星开始。

    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"];
}
    #rating-container > .active {
  color: gold;
}
#emoji-container {
  text-align: center;
  margin-top: 2rem;
}

    Antwort
    0
  • StornierenAntwort