我正在使用jQuery Number Counter动画我的网站上的一些数字。加载页面时,jQuery Number计数器运行正常。我正在使用Ajax调用我的数据库来获取数字。我根据Ajax调用的返回值动态地设置数据属性' data -to‘。但是,如果我使用更改后的data属性值再次启动Ajax调用,则Number计数器将使用初始的“data-to”值运行,而不是使用新的更新值。我不明白为什么数字计数器没有使用Ajax调用返回的新值。这是我的数字计数器初始化代码:
$(document).ready(function(){
getSearchCount();
$('#tags').on('itemAdded', function(event) {
getSearchCount();
});
$('#tags').on('itemRemoved', function(event) {
getSearchCount();
});
});我已经通过控制台日志验证了,对于每个Ajax调用,下面代码中变量'projectCounter‘的值实际上都在改变。该变量用于设置数据属性' data - to‘的值。
下面是Ajax调用的代码:
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发布于 2019-09-25 14:24:02
我想通了。我将jQuery Number计数器移出Ajax函数,改为从Ajax函数调用jQuery Number计数器,如下所示。HTML:
<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:
$('.timer').countTo({from: 0, to: projectCount});https://stackoverflow.com/questions/58090088
复制相似问题