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

debugcn 发表于 Dev

马蒂

我有一张 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 解决这个问题？

弗里克

你做错了什么，因为你的选择器（和），你用 class frontand来定位每个元素。back.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。