如何限制对元素的点击

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>