所有具有 em 類別的元素，都需要根據評級一次顯示一次。 我將表情符號容器設定得與圖示一樣大，因此在隱藏溢出的情況下，只能顯示表情符號容器。 問題是，當我嘗試修改轉換屬性時，它不起作用。
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>
我希望圖示向左平移，以便顯示評級的右面。
這可以大大簡化。從 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#rating-container > .active { color: gold; } #emoji-container { text-align: center; margin-top: 2rem; }