每当我按下页面上的复选框时,都试图重置 CSS 动画。它适用于单个 div,但我想让它同时适用于所有 div,所以我使用了 for。问题只是最后一个 div 重置。我究竟做错了什么?任何帮助表示赞赏。
<div class="total">Subtotal: $300</div>
<div class="total">Subtotal: $300</div>
<div class="total">Subtotal: $300</div>
<div class="produse">
<input type="checkbox" name="product" value="Logo design">I have a bike
<br><input type="checkbox" name="product" value="Website layout">I have a car
</div>
jQuery(document).ready(function($){
$(":checkbox").on("click", function(){
// restart animation
var totalcl = document.getElementsByClassName("total");
var tlength = document.getElementsByClassName("total").length;
for (i=0; i<tlength; i++){
totalcl = document.getElementsByClassName("total")[i];
totalcl.style.webkitAnimation = 'none';
setTimeout(function() {
totalcl.style.webkitAnimation = '';
}, 10);
}
});
});
附言。我知道我应该使用 getElementById 但这不是一个选项,因为它用于 wordpress 插件并且复选框没有 id 标签。
最佳答案
既然您已经在使用 jQuery,那么您应该真正使用它的方法以获得最大的浏览器兼容性:
jQuery(document).ready(function($){
$(":checkbox").on("click", function(){
// restart animation
$(".total")
.css({
fontSize: ""
})
.animate({ fontSize: "24px" }, 1000 );
});
});
有关如何使用动画获得所需效果的更多信息,请参阅 jQuery Documentation
关于javascript - 在数组上重置 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41683545/