单击时图标不旋转

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> 

我的项目包括显示几个divs（使用php的fetcharray loop函数从数据库中提取）在）里面有不同的内容。 但我使用的glyphicon glyphicon-star在每个div中都可以看到。我的问题是旋转函数或jquery只能在第一个div上运行。第二个div或后续的类=“glyphicon glyphicon-star”不会单独旋转。我怎样才能让他们独立旋转？

Answer 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>