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语句。贝塞尔我以为它确实应用了这门课程。

这是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>

我对这一点毫无头绪。所以我想在这里发布。与此同时，我正试图解决这个问题。

所以，如果有人知道解决方案。请。

提前致谢！快乐的编码。

ADITION：

JSFIDDLE添加了工作jsfiddle。问题是。仅当计数器最初不在屏幕中时才会出现我的错误。并且宽度低于800px。在JSFIDDLE中，它总是在屏幕上吗？

ADITION 2：

我发现了它的确切行。：

jQuery(this).waypoint(function(){

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

ADITION 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/

Answer 2

显然是这个功能：

jQuery(this).waypoint(function(){

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

我删除了行，它再次完美无缺。

jquery计数器不起作用

2 个答案: