如果元素具有 class JS，为什么单击时不切换工作

Question

我使用 css 和 js 做 animation 的卡片。 似乎几乎一切都解决了。 我只是想不通为什么this.classList.toggle ('is-active'); 在第二次单击元素时不会删除 class。 帮助修复错误。 这里有什么问题。 为什么在这种情况下toggle会像add一样工作？ 我的错误是什么。

 window.addEventListener('load', function() { const cardsLst = document.querySelectorAll(".card"); for (let card of cardsLst) { card.addEventListener("click", function() { for (let card of cardsLst) { card.classList.remove('is-active'); } this.classList.toggle('is-active'); }); } })

 .cards { display: grid; grid-template-columns: repeat(3, 33.33%); grid-auto-rows: 70vh; }.card { position: relative; overflow: hidden; }.card img { transition: 2s; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }.card.card__title { color: #fff; position: relative; z-index: 2; }.card__text { position: absolute; padding: 50px 100px; font-size: 15px; transform: translate(0px, 70vh); transition: transform.5s ease 0s; z-index: 2; color: #fff; }.card:hover img { transform: scale(1.2); /* Увеличиваем масштаб */ }.card.is-active.card__text { transform: translate(0px, 0px); transition: transform.5s ease.5s; top: 50%; /* 3 */ transform: translate(0, -50%); }.card:after { content: ""; margin: 0; background: red; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); border-radius: 100%; width: 0; height: 0; transition: all 1.3s; }.card.is-active:after { width: max(100vh, 100vw); height: max(100vh, 100vw); }

 <div class="cards"> <div class="card"> <img src="https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg"> <div class="card__title">Lorem </div> <div class="card__text">ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? </div> </div> <div class="card"> <img src="https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg" alt=""> <div class="card__title">Lorem </div> <div class="card__text">ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? </div> </div> <div class="card"> <img src="https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg" alt=""> <div class="card__title">Lorem </div> <div class="card__text">ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? </div> </div> </div>

Answer 1

is-active已在for循环中删除。 因此， toggle会将其添加回来。

作为修复，跳过在for循环中删除 class。

for (let card of cardsLst) {
  if(card === this) { continue; }
  card.classList.remove('is-active');
}