单击时旋转形状

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