Question

所以我有六个<\/?[^a\/].*?>元素，每个元素都有一个#card元素，当点击.content时，该元素应该旋转。但问题是，当我点击#card时，#card的所有六个实例都会轮换。

我想要点击.content内的.content实例旋转。

以下是导致该问题的jQuery：

#card

我试过这个来解决它，但无济于事：

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

有一个简单的解决方案吗？我对jQuery很新，并且不知道语法的全部范围。

Answer 1

更改

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

是

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

Answer 2

切换类非常简单：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

P.S。不要在页面上使用多个ID，请使用类。

如何旋转JUST点击的元素？

2 个答案: