How to fix this in jquery?

Question

I have a 3 x 4 cards, it's a memory game. So to able to play, you need to guess 2 matches.

$('.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>

Based from the snippet, if I click a one card, all of the cards flipped, which is wrong.

Now my problem is, how do I fix this through jquery?

That is what you wrote. Class selects all the elements with that class — Suresh Atta, Feb 25 '17 at 10:16

score 3 · Accepted Answer · edited Feb 25 '17 at 10:33

What you're doing wrong is that you're targeting every single element with the class front and back, because of your selectors (.front and .back).

To fix this, you need to tell jQuery that you're targeting only the elements within the element the user just clicked, and for that you use the find function. This makes sure that jQuery checks just the elements in the one you target in and not every single element in the document.

So, where you wrote:

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

You need to change it to

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

Simple as that.

$('.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>

Well explained answer, keep it up. I have added code snippet if you can always remove it — Satpal, Feb 25 '17 at 10:32

Claudio Cavalcante Tonha · Answer 2 · 2017-10-20T10:50:11.477

2

You need to use this to select only some elements with this class. Try this $(this).find(".front").toggle().

edited Oct 20 '17 at 10:50

answered Feb 25 '17 at 10:18

Claudio Cavalcante Tonha

47
3

You should add some explanation to answer. – Satpal Feb 25 '17 at 10:31

score 2 · Answer 3 · answered Feb 25 '17 at 10:18

2

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

That's it

answered Feb 25 '17 at 10:18

tom10271

4,222
5
33
62

You should add some explanation to answer. – Satpal Feb 25 '17 at 10:32

score 1 · Answer 4 · answered Feb 25 '17 at 10:18

1

Use this:

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

answered Feb 25 '17 at 10:18

Nitesh

1,490
1
12
20

score 0 · Answer 5 · answered Feb 25 '17 at 10:19

0

You selected with jQuery all the .front and all .backclasses, you should use that :

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

answered Feb 25 '17 at 10:19

Cuzi

1,026
10
16

score 0 · Answer 6 · edited May 23 '17 at 12:25

Simply Read Here

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

$('.card').click(function(){
  $('.front , .back' , this).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>

score 0 · Answer 7 · answered Feb 25 '17 at 10:33

When you do

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

You attach a click listener to all elements with class card. Inside, you toggle all elements with class front and back. You need to be toggling just the front and back that are inside the clicked card. $(this).find(".front").toggle(); does just that.

How to fix this in jquery?

7 Answers7