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