當我嘗試通過 js 翻譯元素時，它不起作用

Question

所有具有類 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>

我希望圖標向左平移，以便顯示評級的右臉。

Answer 1

這可以大大簡化。 從 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; }

 <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 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> <script src="emojii.js"></script> </body>

當我嘗試通過 js 翻譯元素時，它不起作用

問題描述

1 個解決方案

解決方案1
0 2022-12-17 14:20:53

當我嘗試通過 js 翻譯元素時，它不起作用

問題描述

1 個解決方案

解決方案1 0 2022-12-17 14:20:53

解決方案1
0 2022-12-17 14:20:53