Semua elemen dengan kelas em perlu dipaparkan sekali pada satu masa mengikut rating. Saya membuat bekas emoji sebesar ikon, jadi dengan limpahan tersembunyi, hanya satu bekas emoji boleh ditunjukkan. Masalahnya, apabila saya cuba mengubah suai sifat transformasi, ia tidak berfungsi.
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>
Saya mahu ikon menyorot ke kiri supaya bahagian kanan rating dipaparkan.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini boleh sangat dipermudahkan. Mengalih keluar semua peraturan kedudukan/transformasi/paparan daripada CSS. Mereka membawa kerumitan yang tidak perlu kepada tugas yang begitu mudah. Juga menambah emas untuk bintang dengan kelas
activedan bermula dengan 5 bintang aktif.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; }