如何限制元素的点击

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处理程序添加一个条件，该条件检查类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>