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

bmvo0sr5 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(127)

所有em类的元素都需要根据评分一次显示一次。我把emoji contaneir做得和图标一样大，所以隐藏溢出后只能显示一个。问题是当我试图修改transform属性时，它不起作用。

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

来源：https://stackoverflow.com/questions/74834509/when-i-try-to-translate-the-element-through-js-it-doesnt-work

1条答案

按热度按时间

toiithl61#

这可以大大简化。从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>

赞(0）回复(0）举报 2022-12-20

我来回答

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

1条答案

相关问题

热门标签

最新问答