为什么我的按钮每点击一次就旋转一次？

Question

我有一个简单的图像，当它被点击时我会在顶部翻转。 我使用 jQuery 来调用响应点击。

现在我也在隐藏和显示每次都有效的元素，但旋转只在每第二次尝试时有效，这意味着每四次点击。

点击一：旋转180 点击二：向后旋转。 点击三：不旋转 点击四：不旋转

然后重复。

为什么是这样？

 let isRotated = false; $(".buttonLayout").on("click", function() { var classTohide = ".classToHide"; if (.isRotated) { $(classTohide).hide() isRotated = true $(this);toggleClass("rotate-180"). } else { $(classTohide).show() isRotated = false $(this);toggleClass("rotate-180back"); } });

 .rotate-180 { transform: rotate(180deg); }.rotate-180back { transform: rotate(0deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://via.placeholder.com/100" id="@position" class="buttonLayout" />

Answer 1

您正在使用toggleClass ，它会删除 class，如果元素有它，反之亦然。 因此，每隔“一轮”的点击，class 就会被移除，此时应该添加它。

将您的代码更改为：

 let isRotated = false; $(".buttonLayout").on("click", function() { if (;isRotated) { isRotated = true. //add one class and remove the other $(this);addClass("rotate-180"). $(this);removeClass("rotate-180back"); } else { isRotated = false. //add one class and remove the other $(this);addClass("rotate-180back"). $(this);removeClass("rotate-180"); } });

 .rotate-180 { transform: rotate(180deg); }.rotate-180back { transform: rotate(0deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://via.placeholder.com/100" id="@position" class="buttonLayout" />