jQuery toggleClass 旋转 180° 不起作用答案

【问题标题】：jQuery toggleClass to rotate 180° doesn't workjQuery toggleClass 旋转 180° 不起作用
【发布时间】：2018-11-06 01:06:20
【问题描述】：

我正在尝试使图像（img 标签）在被点击时旋转 180°。

$(document).off('click', '.taxonomie').on('click', '.taxonomie', function (e) {
    $(".chevron-occasion").toggleClass("flip");
});

.mon-plateau-de-fromages .form-plateau-fromage .chevron-occasion {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 b-gold taxonomie occasion">
   <p class="number-left">1</p>
   <div>
     <p class="titre-taxonomie">Par occasion</p>
     <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/chevron.png" alt="chevron occasion" class="chevron-occasion">
   </div>
   <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/calendar.png" alt="calendar occasion" class="img-occasion">
</div>

所以起初“翻转”类是在点击时添加和删除的。然后我删除了函数中的参数“ e ”，以防万一奇迹使它起作用，但它没有。

我需要旋转的图像是第一个，称为“chevron-occasion”，为什么它不起作用？

谢谢！

【问题讨论】：

分享一个完整的代码，包括订单，我们需要看看你在哪里添加jQuery代码，之前还是之后。我们还需要查看生成的 HTML 而不是 PHP
如果您希望我们提供帮助，您需要提供完整的工作代码，以便我们可以看到问题。如果您会盲目地尝试直到某些事情奏效，则无需接受第一个答案，在这种情况下您可以删除问题。我们需要根据实际问题提供准确的解释
只需将您为图像 URL 显示的 PHP 代码替换为有效的图像 URL 即可使此代码正常工作。

标签： javascript jquery css

【解决方案1】：

如果我正确理解了您的问题。这是解决方案http://jsfiddle.net/xpvt214o/924105/

试试这个 CSS

.flip {
  animation: animate 4s ease-in-out;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

@keyframes animate{
  0%{
    transform: rotate(0deg)
  }
  100%{
    transform: rotate(180deg)
  }
}

此外，在您上面的代码中，参数“e”没有任何功能。因此，删除参数不会有任何效果。

【讨论】：