2014-08-28 8 views
-5

поэтому мой счетчик работает только в первый раз. , нажав кнопку снова, мне нужно продолжить подсчет, но функция не работает после запуска в первый раз, кто-нибудь знает, как это сделать?Счетчик номеров JS работает только один раз

Мои jsFiddle: http://jsfiddle.net/wtkd/xpqg0fa9/

Мои JS, если вы не хотите видеть в jsFiddle:

window.Fighters = (function() { 
    var padNum; 

    function Fighters(options) { 
    var random; 
    this.greenFighter = $('.green-fighter'); 
    this.blueFighter = $('.blue-fighter'); 
    this.team = $('.green-team, .blue-team'); 
    this.thumb = $('.thumb'); 
    random = Math.ceil(Math.random() * 3); 
    $('.punch1').on('click', (function(_this) { 
     return function(e) { 
     return _this.countUp(random, '.right-counter span', 2222); 
     }; 
    })(this)); 
    $('.punch2').on('click', (function(_this) { 
     return function(e) { 
     return _this.countUp(random, '.left-counter span', 2222); 
     }; 
    })(this)); 
    } 

    padNum = function(number) { 
    if (number < 10) { 
     return '0' + number; 
    } 
    return number; 
    }; 

    Fighters.prototype.countUp = function(points, selector, duration) { 
    $({ 
     countNumber: $(selector).text() 
    }).animate({ 
     countNumber: points 
    }, { 
     duration: duration, 
     easing: 'linear', 
     step: function() { 
     $(selector).text(padNum(parseInt(this.countNumber))); 
     }, 
     complete: function() { 
     $(selector).text(points); 
     } 
    }); 
    }; 

    return Fighters; 

})(); 
new window.Fighters(); 
+2

Вопросы, которые задают вопрос: «Почему этот код не работает?» следует пересмотреть в соответствии с руководящими принципами SO http://stackoverflow.com/help/on-topic (первая категория) – Blubberguy22

+0

Я бы сказал, что это соответствует рекомендациям «должно включать проверку желаемого поведения», «конкретную проблему или ошибку», проверьте ", и кратчайший код, необходимый для его воспроизведения в самом вопросе". – Quince

ответ

1

Функция Клик работает каждый раз, но с той же ссылкой случайным образом. Случайно оценивается один раз при первом выполнении вашего скрипта, который затем используется в вашем закрытии, а не повторно оценивается. (Буквально тонны статей, касающихся закрытия в том, что вы можете прочитать на, если вам нужно - здесь один - http://javascriptissexy.com/understand-javascript-closures-with-ease/)

Принесите случайный внутри закрытия, чтобы убедиться, что он оценивается на каждый клик, как так:

$('.punch1').on('click', (function(_this) { 
     return function(e) { 
      random = Math.ceil(Math.random() * 3); 
     return _this.countUp(random, '.right-counter span', 2222); 
     }; 
    })(this)); 

http://jsfiddle.net/y6gwyv0x/1/

или сделать случайную функцию, которая возвращает его значение

random = function(){return Math.ceil(Math.random() * 3);}; 
$('.punch1').on('click', (function(_this) { 
    return function(e) { 

    return _this.countUp(random(), '.right-counter span', 2222); 
    }; 
})(this)); 

случайным образом до сих пор относится к тот, который находится за закрытием, но поскольку он является функцией, он будет запускаться на каждом клике, возвращая новый номер http://jsfiddle.net/y6gwyv0x/3/

+0

Я очень благодарен вам за этот слишком полный ответ !!!! –

Смежные вопросы