javascript - 如何在 jquery 中解决这个问题？

Question

我有一张 3 x 4 的卡片，这是一个内存游戏。所以要玩游戏，您需要猜 2 场比赛。

$('.card').click(function() {
  $('.front').toggle();
  $('.back').toggle();
});

.card .back {
  display: none;
}

.card {
  margin: 8px;
}

.card .front {
  background-color: blue;
}

.back,
.front {
  color: white;
  width: 100px;
  height: 150px;
}

.card .back {
  background-color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">

  <div class="col-xs-4">
    <div class="card" id="dog">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>
  
  <div class="col-xs-4">
    <div class="card" id="cat">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>
  
  <div class="col-xs-4">
    <div class="card" id="dog">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>
  
  <div class="col-xs-4">
    <div class="card" id="cat">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>

</div>

根据代码片段，如果我点击一张卡片，所有卡片都会翻转，这是错误的。

现在我的问题是，如何通过 jquery 解决这个问题？

Answer 1

你做错的是因为你的选择器(.front 和 .back)。

要解决此问题，您需要告诉 jQuery 您仅针对用户刚刚单击的元素中的元素，为此您使用 find 函数。这确保 jQuery 只检查您定位的元素中的元素，而不是文档中的每个元素。

所以，你写的地方:

$('.card').click(function(){
    $('.front').toggle();
    $('.back').toggle();
});

你需要把它改成

$('.card').click(function(){
    $(this).find('.front').toggle();
    $(this).find('.back').toggle();
});

就这么简单。

$('.card').click(function() {
  $(this).find('.front').toggle();
  $(this).find('.back').toggle();
});

.card .back {
  display: none;
}

.card {
  margin: 8px;
}

.card .front {
  background-color: blue;
}

.back,
.front {
  color: white;
  width: 100px;
  height: 150px;
}

.card .back {
  background-color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">

  <div class="col-xs-4">
    <div class="card" id="dog">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="card" id="cat">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="card" id="dog">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="card" id="cat">
      <div class="front">
        image here
      </div>
      <div class="back">
        back card
      </div>
    </div>
  </div>
</div>