css阵列,在阵列上重置CSS动画

尝试在页面上按下复选框时重置css动画。它适用于单个div，但我想让它在同一时间适用于所有div，所以我使用了for。问题只是最后的div复位。我究竟做错了什么？任何帮助赞赏。在阵列上重置CSS动画

Subtotal: $300

Subtotal: $300

Subtotal: $300

I have a bike

I have a car

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

totalcl = document.getElementsByClassName("total")[i];

totalcl.style.webkitAnimation = 'none';

setTimeout(function() {

totalcl.style.webkitAnimation = '';

}, 10);

}

});

});

PS。我知道我应该使用getElementById，但它不是一个选项，因为它是一个wordpress插件，复选框没有id标签。

+0

典型问题，请在此页面中检查：“在循环中创建闭包：常见错误”：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures此处也没有多少解决方法。因为。 –

+0

因为你正在使用jQuery你可能想要利用.each()http://api.jquery.com/jquery.each/ –