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()返回文档中与指定选择器或选择器组匹配的第一个Element。如果没有找到匹配项，则返回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代码即可

theme

如何获取此JavaScript并将其应用于所有这些按钮？

3 个答案: