CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vahn Marty
Vahn Marty

Reputation: 1478

How to fix this in jquery?

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?

Upvotes: 0

Views: 88

Answers (7)

Claudio Cavalcante Tonha
Claudio Cavalcante Tonha

Reputation: 47

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

Upvotes: 2

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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>

Upvotes: 0

dodov
dodov

Reputation: 5844

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.

Upvotes: 0

frick
frick

Reputation: 166

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>

Upvotes: 3

Cuzi
Cuzi

Reputation: 1026

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();
});

Upvotes: 0

tom10271
tom10271

Reputation: 4649

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

That's it

Upvotes: 2

Nitesh
Nitesh

Reputation: 1550

Use this:

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

Upvotes: 1

Related Questions