Как я могу получить этот 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.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 2

Просто замените код 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)')
}

});

Answer 3

Document.querySelector():

Метод Document querySelector() возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов.Если совпадений не найдено, возвращается ноль.

Вы должны использовать Document.querySelectorAll():

Метод Элемент querySelectorAll() возвращает astatic (not live) 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>