更新 Javascript document.querySelector |只有第一个对象有效

Question

所以这是我的代码的更新： 我的代码现在还不错，对容器的影响有效，但其他的没有你有什么想法吗？ :) 我想选择所有具有这些类的元素。

    //Movement Animation to happen
const card = document.querySelectorAll(".card");
const container = document.querySelectorAll(".container");
//Items
const title = document.querySelector(".title");
const cap = document.querySelector(".cap img");
const sizes = document.querySelector (".sizes");
const description = document.querySelector(".info h3");
const purchase = document.querySelector(".purchase button");

//Moving Animation Event
for (let i = 0; i < container.length; i++){
container[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 3 - e.pageX) / 100;
    let yAxis = (window.innerHeight / 2 - e.pageY) / 100;
    card[i].style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  });
}

  //Animate In
  for (let i = 0; i < container.length; i++) {
container[i].addEventListener("mouseenter", (e) => {
    card[i].style.transition = "none";
    //PopOut
    title[i].style.transform = "translateZ(150px)";
    cap[i].style.transform = "translateZ(150px) rotateZ(-25deg)";
    sizes[i].style.transform = "translateZ(100px)";
    description[i].style.transform = "translateZ(125px)";
    purchase[i].style.transform = "translateZ(75px)";
});}

  //Animate Out
  for (let i = 0; i < container.length; i++) {
  container[i].addEventListener("mouseleave", (e) => {
    card[i].style.transition = "all 0.5s ease";
    card[i].style.transform = `rotateY(0deg) rotateX(0deg)`;
    //PopBack
    title[i].style.transform = "translateZ(0px)";
    cap[i].style.transform = "translateZ(0px) rotateZ(0deg)";
    sizes[i].style.transform = "translateZ(0px)";
    description[i].style.transform = "translateZ(0px)";
    purchase[i].style.transform = "translateZ(0px)";
  });}

  

Answer 1

正如@blex 所提到的，querySelector 将只选择一个元素，而不是使用querySelectorAll，它将返回一个元素数组*。循环遍历这个数组并为每个对象添加一个事件监听器：

const container = document.querySelectorAll("div.container");
…

for(elem of conatainer){
let id = conatainer.indexOf(elem)
elem.addEventListener("mouseleave", (e) => {
    card[id].style.transition = "all 0.5s ease";
    card[id].style.transform = `rotateY(0deg) rotateX(0deg)`;
    //PopBack
    title[id].style.transform = "translateZ(0px)";
    cap[id].style.transform = "translateZ(0px) rotateZ(0deg)";
    sizes[id].style.transform = "translateZ(0px)";
    description[id].style.transform = "translateZ(0px)";
    purchase[id].style.transform = "translateZ(0px)";
  });

//etc.

//EDIT
//Moving Animation Event
for (let i = 0; i < container.length; i++){
elem[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 3 - e.pageX) / 100;
    let yAxis = (window.innerHeight / 2 - e.pageY) / 100;
    card[id][i].style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  });
}
}

MDN 中的 querySelectorAll：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

*实际上它是nodeList 而不是数组，但它们的行为几乎相同

Answer 2

document.querySelector 总是只返回第一个元素。所以你需要使用 document.querySelectorAll 并循环遍历元素数组。

这是一个简单的例子：

const allElements = Array.from(document.querySelectorAll('.element'))

allElements.forEach(element => {
  console.log(element);
})