javascript - 我如何让这个 javascript 应用到所有这些按钮？

Question

左边的第一个按钮工作得很好，我希望其他两个按钮也能像这样工作。我不知道如何让 javascript 为右边的两个按钮工作。一段时间以来，我一直在努力解决这个问题，需要一些有关此代码的帮助。提前致谢!

const button = document.querySelector(".addtocart");
const done = document.querySelector(".done");
console.log(button);
let added = false;
button.addEventListener('click',()=>{
  if(added){
    done.style.transform = "translate(-110%) skew(-40deg)";
    added = false;
  }
  else{
    done.style.transform = "translate(0px)";
    added = true;
  }
    
});

*{
  box-sizing:border-box;
  outline:none;
}
body,html{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background-color: #dff9fb;
}
.fa-cart-plus{
  background:#0652DD;
}

.addtocart{
  display:block;
  padding:0.5em 1em 0.5em 1em;
  border-radius:100px;
  border:none;
  font-size:2em;
  position:relative;
  background:#0652DD;
  cursor:pointer;
  height:2em;
  width:10em;
  overflow:hidden;
  transition:transform 0.1s;
  z-index:1;
}
.addtocart:hover{
  transform:scale(1.1);
}
.pretext{
  color:#fff;
  background:#0652DD;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: 'Quicksand', sans-serif;
}
i{
  margin-right:10px;
}
.done{
  background:#be2edd;
  position:absolute;
  width:100%;
  top:0;
  left:0;
  transition:transform 0.3s ease;

  transform:translate(-110%) skew(-40deg);
}
.posttext{
  background:#be2edd;
}
.fa-check{
  background:#be2edd;
}

<button class="addtocart">
  <div class="pretext">
    <i class="fas fa-cart-plus"></i> ADD TO CART
  </div>
  
  <div class="pretext done">
    <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
  </div>
</button>


<button class="addtocart">
  <div class="pretext">
    <i class="fas fa-cart-plus"></i> ADD TO CART
  </div>
  
  <div class="pretext done">
    <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
  </div>
</button>


<button class="addtocart">
  <div class="pretext">
    <i class="fas fa-cart-plus"></i> ADD TO CART
  </div>
  
  <div class="pretext done">
    <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
  </div>
</button>

Answer 1

Document.querySelector() :

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

你必须使用 Document.querySelectorAll() :

The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

您只是将事件附加到第一个元素，您必须使用 Document.querySelectorAll() 获取所有元素并循环遍历所有事件以单独附加事件。

工作代码示例:

const buttonList = document.querySelectorAll(".addtocart");

buttonList.forEach(function(button){
  let added = false;
  button.addEventListener('click',()=>{
    
    const done = button.querySelector('.done');
    if(added){
      done.style.transform = "translate(-110%) skew(-40deg)";
      added = false;
    }
    else{
      done.style.transform = "translate(0px)";
      added = true;
    }

  });
});

*{
  box-sizing:border-box;
  outline:none;
}
body,html{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background-color: #dff9fb;
}
.fa-cart-plus{
  background:#0652DD;
}

.addtocart{
  display:block;
  padding:0.5em 1em 0.5em 1em;
  border-radius:100px;
  border:none;
  font-size:2em;
  position:relative;
  background:#0652DD;
  cursor:pointer;
  height:2em;
  width:10em;
  overflow:hidden;
  transition:transform 0.1s;
  z-index:1;
}
.addtocart:hover{
  transform:scale(1.1);
}
.pretext{
  color:#fff;
  background:#0652DD;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: 'Quicksand', sans-serif;
}
i{
  margin-right:10px;
}
.done{
  background:#be2edd;
  position:absolute;
  width:100%;
  top:0;
  left:0;
  transition:transform 0.3s ease;

  transform:translate(-110%) skew(-40deg);
}
.posttext{
  background:#be2edd;
}
.fa-check{
  background:#be2edd;
}

<button class="addtocart">
  <div class="pretext">
    <i class="fas fa-cart-plus"></i> ADD TO CART
  </div>
  
  <div class="pretext done">
    <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
  </div>
</button>


<button class="addtocart">
  <div class="pretext">
    <i class="fas fa-cart-plus"></i> ADD TO CART
  </div>
  
  <div class="pretext done">
    <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
  </div>
</button>


<button class="addtocart">
  <div class="pretext">
    <i class="fas fa-cart-plus"></i> ADD TO CART
  </div>
  
  <div class="pretext done">
    <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
  </div>
</button>