Question

我正在尝试使用jQuery和CSS通过单击事件旋转形状x。我想要使用ID定位x并打开和关闭rotate类。 rotate类使用CSS transform属性来创建效果。

$('#x').click(function() {
  $('#x').toggleClass('.rotate');
});

.container {
  height: 500px;
  width: 960px;
  margin: 0 auto;
  display: flex;
  background: skyblue;
}

#x {
  margin: auto;
  font-size: 9em;
  color: green;
}

.rotate {
  transform: rotate(7deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="x">x</div>
</div>

Answer 1

在jquery的一些函数中，例如addClass，removeClass，toggleClass，你不需要用点指定选择器，因为你已经知道这是一个类。例如：

$(this).removeClass("yourClass");
$(this).addClass("yourClass");
$(this).toggleClass("yourClass");

你的问题已解决：

$('#x').click(function(){
    $('#x').toggleClass('rotate');  
});

 .container{
      height: 500px;
     width: 960px;
     margin: 0 auto;
     display: flex;
     background: skyblue;
     }
    #x{
    margin: auto;
    font-size: 9em;
    color: green;
    }
    .rotate{
    transform: rotate(7deg);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
  <div id="x">x</div>
  </div>

Answer 2

您的Javascript错误：

$('#x').click(function() {
  $('#x').toggleClass('.rotate');
});

您正在致电toggleClass，因此您无需向选择器添加.。这样：

toggleClass('.rotate')

应该是：

toggleClass('rotate')

单击时旋转形状

2 个答案: