Question

所以我有这个脚本是一个跟随无限动画的计数器。每次交互完成时，计数器都会重置为0。在第四行从底部开始我试图调用一个x.classList.toggle（）来改变css，当计数器命中20时。当我用一个alert（）函数替换classList.toggle它可以工作，但是因为没有类'doton'被添加到'dot1'。我错过了什么？

http://jsfiddle.net/8TVn5/

window.onload = function () {

var currentPercent = 0;

var showPercent = window.setInterval(function() {

    $('#dot1').on('animationiteration webkitAnimationIteration oanimationiteration     MSAnimationIteration', function (e) {
  currentPercent= 0;}); 



   if (currentPercent < 100) {
   currentPercent += 1;
  } else {
    currentPercent = 0;
 }

   if (currentPercent == 20){document.getElementByID('dot1').classList.toggle('doton');}
    document.getElementById('result').innerHTML = currentPercent;
}, 200);


};

Answer 1

我只是一个错字：它应该是getElementById。

http://jsfiddle.net/8TVn5/1/

Answer 2

为什么要混合使用jQuery和普通选择器？

window.onload = function () {
    var currentPercent = 0,
        dot1 = $('#dot1');
    var showPercent = window.setInterval(function() {
        dot1.on('animationiteration webkitAnimationIteration oanimationiteration  MSAnimationIteration',
            function (e) {
                currentPercent= 0;
            }
        ); 

        if (currentPercent < 100) {
            currentPercent += 1;
        } else {
            currentPercent = 0;
        }

        if (currentPercent === 20){
            dot1.toggleClass('doton');
        }
        $('#result').html(currentPercent);

    }, 200);
};

x.classList.toggle（）无法正常工作

2 个答案: