当我尝试通过 js 翻译元素时，它不起作用

Question

All the elements with class em, needs to be shown once at the time on the basis of the rating.所有具有类 em 的元素，需要根据评级一次显示一次。 I made the emoji contaneir as big as the icons, so with overflow hidden only one can be shown.我把表情符号容器做得和图标一样大，所以在隐藏溢出的情况下只能显示一个。 The problem is that when i try to modify the transform property, it doesn't work.问题是当我尝试修改转换属性时，它不起作用。

 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>

I want the icons to translate left, in order to show the right face for the rating.我希望图标向左平移，以便显示评级的右脸。

Answer 1

This can be greatly simplified.这可以大大简化。 Removed all position/transform/display rules from CSS.从 CSS 中删除了所有位置/转换/显示规则。 They bring unnecessary complexity for such a simple task.它们为如此简单的任务带来了不必要的复杂性。 Also added gold color for stars with active class and started with 5 active star.还为具有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