单击时字形图标不旋转答案

【问题标题】：Glyphicon not spinning when clicked单击时字形图标不旋转
【发布时间】：2016-11-23 19:18:00
【问题描述】：

我正在编写一个脚本，该脚本在单击时会旋转图标 class="glyphicon glyphicon-star"。

这是css代码

 .glyphicon-star-animate {
 -webkit-animation-name: rotateThis;
 -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
   }

  @-webkit-keyframes "rotateThis" {
  from { 
    -webkit-transform: rotate( 0deg );  
   }
 to  { 
    -webkit-transform: rotate( 360deg ); 
   }
  }

这里是jquery代码：

$( document ).ready( function() {
$( "#update" ).on( "click", function( e ) {
var $icon = $( this ).find( ".glyphicon.glyphicon-star" ),
  animateClass = "glyphicon-star-animate";

$icon.addClass( animateClass );
// setTimeout is to indicate some async operation
window.setTimeout( function() {
  $icon.removeClass( animateClass );
}, 2000 );
 });    

});

这是 HTML 代码：

  <a id="update" href="#"><i class="glyphicon glyphicon-star"></i></a>

我的项目包括显示几个 div（使用 php 的 fetcharray 循环函数从 db 中提取），其中包含不同的内容。但是我使用的 glyphicon glyphicon-star 在我能看到的每个 div 中都是相同的。我的问题是旋转功能或 jquery 仅在第一个 div 上运行。第二个 div 或随后的 class="glyphicon glyphicon-star" 在单击时不会独立旋转。我怎样才能让它们独立旋转？

【问题讨论】：

标签： php jquery html css

【解决方案1】：

您需要将 ID 更新为类。 Coz ID 是唯一标识符。一个元素只能使用一个 id。 LiveOnFiddle

 $(document).ready(function() {
  $(".update").on("click", function(e) {
    var $icon = $(this).find(".glyphicon.glyphicon-star"),
      animateClass = "glyphicon-star-animate";

    $icon.addClass(animateClass);
    // setTimeout is to indicate some async operation
    window.setTimeout(function() {
      $icon.removeClass(animateClass);
    }, 2000);
  });

});

 .glyphicon-star-animate {
 -webkit-animation-name: rotateThis;
 -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
   }

  @-webkit-keyframes "rotateThis" {
  from { 
    -webkit-transform: rotate( 0deg );  
   }
 to  { 
    -webkit-transform: rotate( 360deg ); 
   }
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<div>
<a class="update" href="#"><i class="glyphicon glyphicon-star"></i></a>
</div>
<div>

  <a class="update" href="#"><i class="glyphicon glyphicon-star"></i></a>
</div>
<div>

  <a class="update" href="#"><i class="glyphicon glyphicon-star"></i></a>
</div>

【讨论】：

谢谢@Mostafa Baezid