vanilla javascript 动画仅适用于一个元素？

Question

I wrote an animation to fade a list item off of the page, but it is only working for the first class that has the class name .grid-item, why is this happening and how can I fix this problem? It works perfectly fine for the first grid item and then nothing for the others.

 let addCart = document.querySelector(".add-btn"); let item = document.querySelector(".grid-item"); addCart.addEventListener("click", function() { item.style.animation = "add-cart"; item.style.animationDuration = "3s"; setTimeout(() => { item.style.animation = "none"; }, 1000); });

 @keyframes add-cart { 0% { transform: translateY(0px); z-index: 1000; } 50% { transform: translateY(210%) scale(0.3); opacity: 0.1; } 51% { transform: translateY(-110%); } 100% { transform: translateY(0px); } } .animation { animation: add-cart; animation-duration: 3s; }

 <div class="grid-item"> <h3 class="title">Cano One</h3> <div class="img-container"> <img class="bike-image" src="img/bike1.png" alt="bike" /> </div> <p class="item-price">$2850</p> <button class="add-btn"><p class="plus">+</p></button> </div> <div class="grid-item"> <h3 class="title">Predator</h3> <div class="img-container"> <img class="bike-image" src="img/bike2.png" alt="bike" /> </div> <p class="item-price">$2010</p> <button class="add-btn"><p class="plus">+</p></button> </div>

Answer 1

You need to use querySelectorAll so the click event listener can be added to all the elemlents.

let gridItems = document.querySelectorAll(".grid-item");
gridItems.forEach(item => {
  const button = item.querySelector('.add-btn')
  button.addEventListener('click', () => {
    item.style.animation = "add-cart";
    item.style.animationDuration = "3s";

    setTimeout(() => {
      item.style.animation = "none";
    }, 1000);
  })
})