Question

我有一张3 x 4卡，它是一款记忆游戏。所以为了能够比赛，你需要猜测2场比赛。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

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

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

Answer 1

由于您的选择器（front和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>

Answer 2

您需要使用 this 仅选择一些具有此class的元素。试试这个$(this).find(".front").toggle().

Answer 3

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

就是这样

Answer 4

使用此：

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

Answer 5

您使用jQuery选择了所有.front和所有.back类，您应该使用它：

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

Answer 6

简单 Read Here

$('.front , .back' , this).toggle();

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 7

当你这样做时

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

您将点击侦听器附加到具有类card的所有元素。在内部，您可以使用课程front和back切换所有元素。您只需切换所点击卡片中的front和back即可。 $(this).find(".front").toggle();就是这么做的。

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

7 个答案: