[英]Glyphicon not spinning when clicked
I am working on a script which spins the icon class="glyphicon glyphicon-star" when clicked. 我正在编写一个脚本,该脚本在单击时会旋转图标class =“ glyphicon glyphicon-star”。
Here is the css code 这是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 );
}
}
Here is the jquery code : 这是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 );
});
});
Here is the HTML Code : 这是HTML代码:
<a id="update" href="#"><i class="glyphicon glyphicon-star"></i></a>
My project consists of displaying several divs(extraction from db using php's fetcharray loop function)with different contents inside it. 我的项目包括显示几个div(使用php的fetcharray循环函数从db提取),其中包含不同的内容。 But the glyphicon glyphicon-star i use is same in every div i could see.
但是我使用的glyphicon glyphicon-star在我看到的每个div中都是相同的。 My problem is the rotating function or the jquery run only on the first div.
我的问题是旋转函数或jquery仅在第一个div上运行。 The second div or the succeeding class="glyphicon glyphicon-star" is not rotating on click independently.
第二个div或后续的class =“ glyphicon glyphicon-star”不会在点击时独立旋转。 How can i make them rotate independently ?
如何使它们独立旋转?
You need to make the ID update to class. 您需要将ID更新为class。 Coz ID is unique identifier.
Coz ID是唯一标识符。 you can use only one id for one element.
您只能为一个元素使用一个ID。 LiveOnFiddle
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.