鼠标点击限制和计数器jQuery

Question

我试图将每回合允许的点击次数限制在2次，因为一旦我足够快地按下3张牌，游戏就可以翻过一张匹配的牌。

(HTML

 <div class ="container col-md-12">
        <section class="cardsContainer">
            <div class="card" data-card-type="1" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/cookie.JPG"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="1" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/cookie.JPG"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="2" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/baronIlanYahav.jpg"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="2" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/baronIlanYahav.jpg"></div>
            </div>
        </section>
        <section class="cardsContainer">
            <div class="card" data-card-type="3" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/beverlyHills.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="3" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/beverlyHills.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="4" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/bulgaria.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="4" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/bulgaria.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="5" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/mrMustache.jpg"></div>
            </div>
        </section>
    <section class="cardsContainer">
        <div class="card" data-card-type="5" onclick="flip($(this))">
                <div class="front"><img src="../images/backsideBlue.png"></div>
                <div class="back"><img src="../images/mrMustache.jpg"></div>
            </div>
        </section>
    </div>

- JS

 function flip(card) {
     if (!selectedCards[card.data("card-type")]) {

     }
     if (!$(card).hasClass("flipped")) {
         $(card).toggleClass('flipped');
         previous = $(card);

         if (!card1) {
             card1 = $(card);
         } else {
             card2 = $(card);
             var cardType1 = card1.data("card-type");
             var cardType2 = card2.data("card-type");
             if (checkMatch(cardType1, cardType2)) {
                 addPoint();
                 addSelectedCards(cardType2);
                 disableCards();
             } else {
                 setTimeout(function () {
                         flipBack();
                         //clean cards vars
                         resetCards();
                     },
                     1000);//set timer 1 sec to flip back
             }
         }
     }

请帮忙!奖励如果你能告诉我如何计算点击次数，我将非常感激。

Answer 1

你可以通过计算翻转的卡片数量来阻止第三次点击:

function flip() { 
  if ( $('.flipped').length > 2 ) {
    return false;
  }
  // do your thing [...]
}

通过全局变量或

计算点击次数http://api.jquery.com/jQuery.data/