jquery 计数器不工作

Question

我的网站上有 2 个计数器，它们在我加载页面时计数。但是当我的屏幕宽度低于 800px 时。当我加载页面时，它们不会自动启动。

但是，如果我真的快速滚动到他们在网站上的位置。他们确实开始了。全屏它们也可以正常工作。在移动设备上它们也可以工作。

这里是 jquery 代码：

if (jQuery('.shortcode_counter').size() > 0) {
    if (jQuery(window).width() > 760) {
        jQuery('.shortcode_counter').each(function(){
            if (jQuery(this).offset().top < jQuery(window).height()) {
                if (!jQuery(this).hasClass('done')) {
                    var set_count = jQuery(this).find('.stat_count').attr('data-count');
                    jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
                            var data = Math.floor(now);
                            jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
                        }
                    });
                    jQuery(this).addClass('done');
                    jQuery(this).find('.stat_count');
                }
            } else {
                jQuery(this).waypoint(function(){
                    if (!jQuery(this).hasClass('done')) {
                        var set_count = jQuery(this).find('.stat_count').attr('data-count');
                        jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
                                var data = Math.floor(now);
                                jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
                            }
                        });
                        jQuery(this).addClass('done');
                        jQuery(this).find('.stat_count');
                    }
                },{offset: 'bottom-in-view'});
            }
        });
    }
}

我不喜欢jquery。这是我试过的 jquery 代码：

if (jQuery(window).width() > 760) { 至 if (jQuery(window).width() > 0) { 因为可能是最小屏幕宽度？
if (!jQuery(this).hasClass('done')) { 刚刚完全删除了这个 if 语句。因为我认为它确实应用了 class 之类的东西。

这里是 HTML:

<div class="row">
    <div class="col-sm-6 module_number_5 module_cont pb50 module_counter">
        <div class="module_content shortcode_counter breedte-100">
            <div class="counter_wrapper">
                 <div class="counter_content">
                     <div class="stat_count_wrapper">
                         <h1 class="stat_count speciale-grote-counter" data-count="{{ records[1].number }}">0</h1>
                     </div>
                     <div class="counter_body">
                         <h5 class="counter_title speciale-grote-counter-text">{{ records[1].year }}</h5>
                     <div class="stat_temp"></div>
                 </div>
             </div>
         </div>
     </div>
 </div>

我对此一无所知。所以我想在这里 post 吧。与此同时，我正在努力解决这个问题。

因此，如果有人知道解决方案。请。

提前致谢！编码愉快。

补充：

JSFIDDLE 添加了工作 jsfiddle。问题是。我的错误仅在计数器最初不在屏幕上时发生。宽度小于 800 像素。在 JSFIDDLE 中，它总是在屏幕上，对吗？

补充 2：

我已经找到了这一行。 :

jQuery(this).waypoint(function(){

},{offset: 'bottom-in-view'});

附加 3：

显然我发现的其他行是问题所在。我已将其放在下面的答案中，但我也将其包含在这里：

已删除：

jQuery(this).waypoint(function(){

},{offset: 'bottom-in-view'});

现在工作得很好。

Answer 1

我不太清楚你说的 "My error only occurs when the counter is not in the screen initially."

是什么意思

但这就是您要找的吗：

https://jsfiddle.net/9q0eLvs1/3/

我唯一改变的是这一行：

if (jQuery(window).width() > 260) {

此外，如果您不需要 width()，那么您只需将其删除，您的代码应如下所示：

if (jQuery('.shortcode_counter').size() > 0) {

            jQuery('.shortcode_counter').each(function(){
                if (jQuery(this).offset().top < jQuery(window).height()) {
                    if (!jQuery(this).hasClass('done')) {
                        var set_count = jQuery(this).find('.stat_count').attr('data-count');
                        jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
                                var data = Math.floor(now);
                                jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
                            }
                        });
                        jQuery(this).addClass('done');
                        jQuery(this).find('.stat_count');
                    }
                } else {
                    jQuery(this).waypoint(function(){
                        if (!jQuery(this).hasClass('done')) {
                            var set_count = jQuery(this).find('.stat_count').attr('data-count');
                            jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
                                    var data = Math.floor(now);
                                    jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
                                }
                            });
                            jQuery(this).addClass('done');
                            jQuery(this).find('.stat_count');
                        }
                    },{offset: 'bottom-in-view'});
                }
            });

    }

这里是 FIDDLE 没有 width() 场景：

https://jsfiddle.net/9q0eLvs1/4/

Answer 2

显然是这个函数：

jQuery(this).waypoint(function(){

},{offset: 'bottom-in-view'});

我删除了这些行，它又可以正常工作了。

jquery 计数器不工作

jquery counter does not work

html

javascript

css

jquery

counter