我如何有多個類來監聽Javascript中的click事件？

Question

我想在每次點擊時通過3D轉換分別旋轉多個卡（並非同時全部旋轉）。 但是，我似乎只有第一個翻轉，而沒有后續翻轉。

 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> 

我嘗試將整個內容包裝到class =“ wrapper”和以下代碼中，但仍然無法正常工作：

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

Answer 1

您正在使用document.querySelector() ，它僅返回class card的第一個元素。 您應該使用Document.querySelectorAll() ，然后forEach() 。 在循環中添加事件監聽器。

 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

問題是您正在使用document.querySelector() 查詢單個卡 。

您必須使用document.querySelectorAll()查詢所有卡 。

然后使用forEach()將事件處理程序附加到每張卡上：

 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>