我如何有多个类来监听Javascript中的click事件？

Question

I have multiples of cards that I want to rotate individually through 3D transformation on each click (not all at the same time). But, I can only seem to have the first one flip, but not the subsequent ones.

 var card = document.querySelector('.card'); card.addEventListener( 'click', function() { card.classList.toggle('is-flipped'); }); 

 body { font-family: sans-serif; } .scene { width: 200px; height: 260px; border: 1px solid #CCC; margin: 40px 0; perspective: 600px; } .card { width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; cursor: pointer; position: relative; } .card.is-flipped { transform: rotateY(180deg); } .card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 40px; backface-visibility: hidden; } .card__face--front { background: red; } .card__face--back { background: blue; transform: rotateY(180deg); } 

 <div class="scene"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <div class="scene"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> 

I tried wrapping the entire thing into class="wrapper" and the following code, but still didn't work:

var x = document.getElementsByClassName("wrapper").querySelectorAll(".scene");  
    x.addEventListener( 'click', function() {
    x.classList.toggle('is-flipped');

Answer 1

You are using document.querySelector() which returns only the first element with class card . You should use Document.querySelectorAll() and then forEach() . add event listener in loop.

 var cards = document.querySelectorAll('.card'); Array.from(cards).forEach(card => { card.addEventListener( 'click', function() { card.classList.toggle('is-flipped'); }); }) 

 body { font-family: sans-serif; } .scene { width: 200px; height: 260px; border: 1px solid #CCC; margin: 40px 0; perspective: 600px; } .card { width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; cursor: pointer; position: relative; } .card.is-flipped { transform: rotateY(180deg); } .card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 40px; backface-visibility: hidden; } .card__face--front { background: red; } .card__face--back { background: blue; transform: rotateY(180deg); } 

 <div class="scene"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <div class="scene"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> 

Answer 2

The problem is that you are querying a single card using document.querySelector() .

You have to query all cards using document.querySelectorAll() .

Then use a forEach() to attach the event handler to each card:

 document.querySelectorAll('.card').forEach(card => { card.addEventListener('click', () => { card.classList.toggle('is-flipped'); }); }); 

 body { font-family: sans-serif; } .scene { width: 200px; height: 260px; border: 1px solid #CCC; margin: 40px 0; perspective: 600px; } .card { width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; cursor: pointer; position: relative; } .card.is-flipped { transform: rotateY(180deg); } .card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 40px; backface-visibility: hidden; } .card__face--front { background: red; } .card__face--back { background: blue; transform: rotateY(180deg); } 

 <div class="scene"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <div class="scene"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div>