如何旋转JUST点击的元素？

Question

So I have six #card elements, and each one has a .content element inside of it that is supposed to rotate when that #card is clicked on. However the problem is that when I click on a #card , all six instances of .content rotate.

I want JUST the instance of .content inside the clicked on #card to rotate.

Here is the jQuery that was causing that problem:

var rotated = false;
$('#card').click(function(){
    if(!rotated){
        $('.content').css({
            "transform": "rotateX(180deg)"
        });
        rotated = true; 
    }else{
        $('.content').css({
            "transform": "rotateX(0deg)"
        });
        rotated = false;
    }
});

I tried this to fix it but to no avail:

var rotated = false;
$('#card').click(function(){
    if(!rotated){
        $(this + '.content').css({
            "transform": "rotateX(180deg)"
        });
        rotated = true; 
    }else{
        $(this + '.content').css({
            "transform": "rotateX(0deg)"
        });
        rotated = false;
    }
});

Is there a simple solution to this? I'm newish to jQuery and don't know the full extent of the syntax.

Answer 1

Change

$(this + '.content').css({

to be

$(this).find(".content").css({

Answer 2

Toggle classes is so much easier:

 $(".card").click(function() { $(this).find(".content").toggleClass("rotated"); }); 

 .card { display: inline-block; } .content { background: rgb(15, 33, 155); background: linear-gradient(to right, rgba(15, 33, 155, 1) 0%, rgba(255, 26, 85, 1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f219b', endColorstr='#ff1a55', GradientType=1); color: white; height: 40px; width: 40px; transform: rotateX(0deg); transition: all .3s ease; } .rotated { transform: rotateX(180deg) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=card> <div class=content>1</div> </div> <div class=card> <div class=content>2</div> </div> <div class=card> <div class=content>3</div> </div> <div class=card> <div class=content>4</div> </div> <div class=card> <div class=content>5</div> </div> <div class=card> <div class=content>6</div> </div> 

PS Don't use more than one ID on the page, use classes.