如何限制對元素的點擊

Question

我的想法是創建翻轉紙牌游戲。 當用戶翻轉卡片時，他會收到隨機生成的點數。 好的，現在用戶可以翻轉卡片並檢查他將獲得多少積分，但我想限制他可以翻轉的卡片數量。 例如，現在有 4 張牌。 其中只有 2 個應該能夠打開。 我會感謝每一個建議。

 $('.front').html('dd'); $('.card').each(function() { $(this).on("click", function() { $(this).addClass("flipped"); }); }); function getNumber() { $('.card .back').each(function() { var minNumber = 0; var maxNumber = 2; var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber); $(this).html(randomnumber); }); } getNumber();

 .container { width: 200px; height: 260px; float: left; position: relative; border: 1px solid #ccc; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .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://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section>

Answer 1

要限制可以翻轉的卡片數量， click向click處理程序添加一個條件，以檢查有多少張卡片與類flipped 。 如果兩個已經存在，那么您可以禁止任何進一步的點擊產生效果。

另請注意，您不需要each()循環將click()處理程序添加到多個元素。 同樣，您不需要循環來設置html() ，只需提供一個函數來返回要設置的值。 嘗試這個：

 $('.front').html('dd'); $('.card').on("click", function() { if ($('.flipped').length < 2) { $(this).addClass("flipped"); } else { console.log('You already flipped two cards!'); } }); function getNumber() { var minNumber = 0; var maxNumber = 2; $('.card .back').html(function() { return Math.floor(Math.random() * (maxNumber + 1) + minNumber); }); } getNumber();

 .container { width: 200px; height: 260px; float: left; position: relative; border: 1px solid #ccc; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .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://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section> <section class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> </div> </section>