如何让这个 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()：

Document 方法querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回 null。

你必须使用Document.querySelectorAll():

Element 方法querySelectorAll() 返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。

您只是将事件附加到第一个元素，您必须使用 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>

Answer 2

首先你需要使用document.querySelectorAll(".addtocart");选择所有元素，然后用for循环循环所有元素这里是更新的代码

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

Answer 3

只需将 Javascript 代码替换为以下代码

$(".addtocart").click(function(e){
const style = $(e.currentTarget).find('.done').attr('style');
if(style == undefined || style == 'transform:translate(-110%) skew(-40deg)'){
    $(e.currentTarget).find('.done').attr('style','transform:translate(0px)')
} else{
    $(e.currentTarget).find('.done').attr('style','transform:translate(-110%) skew(-40deg)')
}

});