首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么jQuery Number Counter在html属性改变时没有更新?

为什么jQuery Number Counter在html属性改变时没有更新?
EN

Stack Overflow用户
提问于 2019-09-25 09:43:11
回答 1查看 114关注 0票数 0

我正在使用jQuery Number Counter动画我的网站上的一些数字。加载页面时,jQuery Number计数器运行正常。我正在使用Ajax调用我的数据库来获取数字。我根据Ajax调用的返回值动态地设置数据属性' data -to‘。但是,如果我使用更改后的data属性值再次启动Ajax调用,则Number计数器将使用初始的“data-to”值运行,而不是使用新的更新值。我不明白为什么数字计数器没有使用Ajax调用返回的新值。这是我的数字计数器初始化代码:

代码语言:javascript
运行
复制
$(document).ready(function(){
    getSearchCount();

    $('#tags').on('itemAdded', function(event) {
        getSearchCount();
    });

    $('#tags').on('itemRemoved', function(event) {
        getSearchCount();
    });
});

我已经通过控制台日志验证了,对于每个Ajax调用,下面代码中变量'projectCounter‘的值实际上都在改变。该变量用于设置数据属性' data - to‘的值。

下面是Ajax调用的代码:

代码语言:javascript
运行
复制
function getSearchCount()
{ 
    var sok = document.querySelector('[name="searchstring"]').value;

    $.ajax({
        url: '../../core/search/get_general_count.php', 
        data:{sok:sok}, 
        dataType: 'json', 
        success: function(response)
        {
            console.log(JSON.stringify(response));
            var searchCount = response;

            for (var i in searchCount)
            {
                var countrow = searchCount[i];
                projectCount = countrow[0];
                //var profileid = profilerow[0];
                //var profiletype = profilerow[2];
            }

            $('#count-projects').attr('data-to',projectCount);
            console.log(projectCount);

            (function ($) {
                $.fn.countTo = function (options) {
                    options = options || {};

                    return $(this).each(function () {
                        // set options for current element
                        var settings = $.extend({}, $.fn.countTo.defaults, {
                            from: $(this).data('from'),
                            to: $(this).data('to'),
                            speed: $(this).data('speed'),
                            refreshInterval: $(this).data('refresh-interval'),
                            decimals: $(this).data('decimals')
                        }, options);

                        // how many times to update the value, 
                        // and how much to increment the value on each update
                        var loops = Math.ceil(settings.speed / settings.refreshInterval),
                        increment = (settings.to - settings.from) / loops;

                        // references & variables that will change with each update
                        var self = this,
                        $self = $(this),
                        loopCount = 0,
                        value = settings.from,
                        data = $self.data('countTo') || {};

                        $self.data('countTo', data);

                        // if an existing interval can be found, clear it first
                        if (data.interval) {
                            clearInterval(data.interval);
                        }
                        data.interval = setInterval(updateTimer, settings.refreshInterval);

                        // initialize the element with the starting value
                        render(value);

                        function updateTimer() {
                            value += increment;
                            loopCount++;

                            render(value);

                            if (typeof(settings.onUpdate) == 'function') {
                                settings.onUpdate.call(self, value);
                            }

                            if (loopCount >= loops) {
                                // remove the interval
                                $self.removeData('countTo');
                                clearInterval(data.interval);
                                value = settings.to;

                                if (typeof(settings.onComplete) == 'function') {
                                    settings.onComplete.call(self, value);
                                }
                            }
                        }

                function render(value) {
                    var formattedValue = settings.formatter.call(self, value, settings);
                    $self.html(formattedValue);
                }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,               // the number the element should start at
        to: 0,                 // the number the element should end at
        speed: 1000,           // how long it should take to count between the 
        target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,           // the number of decimal places to show
        formatter: formatter,  // handler for formatting the value before 
        rendering
        onUpdate: null,        // callback method for every time the element is updated
        onComplete: null       // callback method for when the element finishes updating
    };

    function formatter(value, settings) {
        return value.toFixed(settings.decimals);
    }
}(jQuery));

jQuery(function ($) {
// custom formatting example
$('.count-number').data('countToOptions', {
    formatter: function (value, options) {
        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+ 
 (?!\d))/g, ' ');
    }
});

// start all the timers
$('.timer').each(count);  

function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || 
{});
    $this.countTo(options);
}
});

    //alert(detrow.toString());     
  }, // end response success
error: function (jqXHR, exception) {
    var msg = '';
    if (jqXHR.status === 0) {
        //msg = 'Not connect.\n Verify Network.';
    } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
    } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
    } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
    } else if (exception === 'timeout') {
        msg = 'Time out error.';
    } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
    } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
    }
        alert(msg);
    }
    }); //end ajax
  }; // end function
EN

Stack Overflow用户

发布于 2019-09-25 14:24:02

我想通了。我将jQuery Number计数器移出Ajax函数,改为从Ajax函数调用jQuery Number计数器,如下所示。HTML:

代码语言:javascript
运行
复制
<h5 id="count-projects" class="description-header timer count-title count-number" 
 style="font-size: 40px;color: #808080;" data-to="" data-speed="500"></h5>

jQuery:

代码语言:javascript
运行
复制
 $('.timer').countTo({from: 0, to: projectCount});
票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58090088

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档