單擊時Glyphicon不旋轉

Question

我正在編寫一個腳本，該腳本在單擊時會旋轉圖標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”不會在點擊時獨立旋轉。 如何使它們獨立旋轉？

Answer 1

您需要將ID更新為class。 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>