Вы, вероятно, скажете мне, чтобы я сделал все это в jQuery, но я все равно прошу.
У меня есть библиотека анимации, которая использует счетчик для подсчета от 0 до X. Это была часть HTML-шаблона, который я действительно не хочу изменять.
Я создал сценарий AJAX для ПОЛУЧЕНИЯ данных, которые мне нужно подсчитать, из источника RESTful API. Да, я знаю, api-key (секретный) все еще там, но нет конфиденциальных данных, и я буду циклически его повторять, когда мы здесь закончим.
Этот HTML-код правильно отображает значение, но я не могу понять, как передать значение jQuery var $ numClients в атрибут data-to.
Может ли кто-нибудь помочь мне разобраться в этом? Я надеялся, что смогу просто сослаться на переменную типа «data-to = $ varFromQuery», но я работаю с серверной частью, а не с JS, поэтому я полностью потерялся в этом.
$(document).ready(function() {
$.ajax({
url: "https://path.to.url"
}).then(function(data) {
$('.totalTransferredGB').append(data.totalTransferredGB);
$('.numClients').append(data.numClients);
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class = "counter-item">
<span class = "counter-number numClients" data-from = "1" data-to = "WHAT DO I PUT HERE" data-speed = "20"></span>
<span class = "counter-text">Unique Devices Connected</span>
</div>...then(function(data) {
document.getElementById('totalGB').innerHTML=data.totalGB;
document.getElementById('totalGB').setAttribute('data-to',data.totalGB);
document.getElementById('numUsers').innerHTML=data.numUsers;
document.getElementById('numUsers').setAttribute('data-to',data.numUsers);
document.getElementById('numClients').innerHTML=data.numClients;
document.getElementById('numClients').setAttribute('data-to',data.numClients);
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете использовать метод data() для обновления атрибута данных элемента:
$(document).ready(function() {
$.ajax({
url: "https://store.zapier.com/api/records?secret=5226d37cd13b40edbb97036f523d0a4e"
}).then(function(data) {
$('.totalTransferredGB').append(data.totalTransferredGB);
$('.numClients').data('to', data.numClients);
// for testing:
console.info($('.numClients').data('to'));
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class = "counter-item">
<span class = "counter-number numClients" data-from = "1" data-to = "WHAT DO I PUT HERE" data-speed = "20"></span>
<span class = "counter-text">Unique Devices Connected</span>
</div>Одно предостережение заключается в том, что он не обновляет DOM. Данные хранятся в объекте в памяти, который jQuery создает для повышения производительности. Если вам требуется обновить атрибут data-to в самой DOM, вам нужно будет вместо этого использовать attr():
$('.numClients').attr('data-to', data.numClients); // set the value
var numClients = $('.numClients').attr('data-to'); // get the value
Обновите элемент с помощью jQuery
.prop()или (лучше) jQuery.data()(если так используются атрибуты данных).