javascript - 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>

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

所以如果有人知道这个的解决方案。请。

提前致谢!快乐编码。

补充:

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

补充 2:

我找到了这一行。 :

jQuery(this).waypoint(function(){

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

补充 3:

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

已删除:

jQuery(this).waypoint(function(){

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

现在工作得很好。

Answer 1

我不完全确定“我的错误只发生在计数器最初不在屏幕上时”的意思。

但这就是你要找的吗:

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'});
                }
            });

    }

这是一个没有 width() 场景的 FIDDLE:

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