cari

Rumah  >  Soal Jawab  >  teks badan

Apabila saya cuba menterjemah elemen melalui js ia tidak berfungsi

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.

P粉277305212P粉277305212285 hari yang lalu372

membalas semua(1)saya akan balas

  • P粉916553895

    P粉9165538952024-02-18 00:27:07

    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 active dan 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 <= 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;
}
    

  
    
    
    
      
      
      
      
      
    
    
    
    
      
    
    
  
    
  sssccc

    balas
    0
  • Batalbalas