Jquery adding class to single element

Question

Putting together a simple jquery flip on click and return when mouse leaves the div container. Currently the class addition on click is being applied to all elements instead of only the one clicked.

JSFiddle

 $('.flip').click(function(){ $(this).find('.card').addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; }); 

 body { background: #ccc; } .flip { -webkit-perspective: 800; width: 200px; height: 100px; position: relative; margin: 20px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 100px; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip"> <div class="card 1"> <div class="face front">Front</div> <div class="face back">Back</div> </div> <br> <div class="card 2"> <div class="face front">Front</div> <div class="face back">Back</div> </div> </div> 

Answer 1

You added your click handler to the element <div class="flip"> . In your click handler, you find all the child elements of the div that was clicked with class "card" and change them.

What if you register your click handler only on the elements with class card?

$('.flip .card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 2

You need to add your click handler to the card class instead of the parent <div> ; otherwise, this references the parent and will find all .card children.

$('.card').click(function(){
  $(this).addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});

There's a running snippet below where you can see it in action.

 $('.card').click(function(){ $(this).addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; }); 

 body { background: #ccc; } .flip { -webkit-perspective: 800; width: 200px; height: 100px; position: relative; margin: 20px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 100px; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip"> <div class="card 1"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> <br> <div class="card 2"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> </div> 

Answer 3

Your selectors were at the parent div level, here you go:

http://jsfiddle.net/vrnft584/

$('.card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 4

Bind the click event to the card and not the flip:

  $('.card').click(function(){ $(this).addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; }); 

 body { background: #ccc; } .flip { -webkit-perspective: 800; width: 200px; height: 100px; position: relative; margin: 20px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 100px; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip"> <div class="card 1"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> <br> <div class="card 2"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> </div> 

Answer 5

it's simple just add the event to the element itself not the parent element

    $('.flip .card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 6

You just need to apply the the class to the clicked card you were applying it to the containing div. There you go:

$('.card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});