Javascript 单击即可旋转形状

我正在尝试使用jQuery和CSS通过单击事件旋转形状x。我想用id定位

x

，并打开和关闭

rotate

类。

rotate

类使用CSS

transform

属性来创建效果

$（'#x'）。单击（函数（）{
$（'#x'）.toggleClass（'.rotate'）；
});
.container{
高度：500px；
宽度：960px；
保证金：0自动；
显示器：flex；
背景：天蓝色；
}
#x{
保证金：自动；
字号：9em；
颜色：绿色；
}
.轮换{
变换：旋转（7度）；
}

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

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

你的问题修正了：


$（'#x'）。单击（函数（）{
$（'#x'）。toggleClass（'rotate'）；
});
.container{
高度：500px；
宽度：960px；
保证金：0自动；
显示器：flex；
背景：天蓝色；
}
#x{
保证金：自动；
字号：9em；
颜色：绿色；
}
.轮换{
变换：旋转（7度）；
}

x
您的Javascript出现错误：

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

您正在调用
toggleClass
，因此无需向选择器添加
。因此：

toggleClass('.rotate')

应该是：

toggleClass('rotate')

看起来像是家庭作业或更糟糕的订单…@Paulie_D仅供参考，OP中确实包含了代码，他们只是修改了格式，所以它没有正确显示。我已经为他们编辑过了检查一下这个代码笔，把它弄乱以获得想要的结果代码就在那里，我只是剪掉了它，所以我不明白它的意思downvotes@OP代码正常工作，只需从
$（this.toggleClass（'rotate'）
中删除
。我投票决定以打字错误结束。这是解决办法。一点小费。在变换时将变换添加到X以使旋转更平滑。