卡片翻轉jQuery同時翻轉兩張卡片？

Question

這是我第一次嘗試卡片翻轉編碼。 我可以使用它，但是現在我想做兩件事，但我做不到：

1. 我希望每個卡在單擊相應的卡時分別翻轉。
2. 我希望該圖像卡具有移動響應能力。

 function flip() { $('.card').toggleClass('flipped'); } 

 .cardContainer { width: 100%; height: 484px; position: relative; border: 1px solid #ccc; -webkit-perspective: 400px; -moz-perspective: 400px; -o-perspective: 400px; perspective: 400px; margin-bottom: 50px; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { display: block; height: 100%; width: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 140px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: red; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="cardContainer"> <div class="card" onclick="flip()"> <div class="front"><img src="http://little.convio.net/images/content/pagebuilder/Alyssa_front.jpg" width="400" /></div> <div class="back">2</div> </div> </section> <section class="cardContainer"> <div class="card" onclick="flip()"> <div class="front"><img src="http://little.convio.net/images/content/pagebuilder/Alyssa_back.jpg" width="400" /></div> <div class="back">2</div> </div> </section> 

見jsFiddle

正在使用的網站

我不是網頁設計師/開發人員，所以我的編碼經驗非常有限。 這是完成此頁面的難題的最后一部分。 感謝您的幫助。

Answer 1

您可以在主腳本中管理點擊事件，並在toggle .card后在事件目標的最近的.card上應用toggle 。

 $('document').ready(function() { $('.card').on('click', function(e) { $(e.target).closest('.card').toggleClass('flipped'); }); }); 

 .cardContainer { width: 100%; height: 484px; position: relative; border: 1px solid #ccc; -webkit-perspective: 400px; -moz-perspective: 400px; -o-perspective: 400px; perspective: 400px; margin-bottom: 50px; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { display: block; height: 100%; width: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 140px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: red; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="cardContainer"> <div class="card"> <div class="front"> <img src="http://little.convio.net/images/content/pagebuilder/Alyssa_front.jpg" width="400" /> </div> <div class="back">2</div> </div> </section> <section class="cardContainer"> <div class="card"> <div class="front"> <img src="http://little.convio.net/images/content/pagebuilder/Alyssa_back.jpg" width="400" /> </div> <div class="back">2</div> </div> </section> 

對於響應部分，建議您使用960 Grid System或Bootstrap網格系統之類的網格系統。