您可能会告诉我在jQuery中完成所有操作,但是我还是要问。
我有一个动画库,该库使用一个从0到X的计数器进行计数。这是我实际上不想修改的HTML模板的一部分。
我已经构建了一个AJAX脚本来从RESTful API源获取需要计数的数据。是的,我知道,api密钥(机密)仍然存在,但是没有敏感数据,在这里完成之后,我将对其进行循环。
此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);
});
答案 0 :(得分:1)
您可以使用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.log($('.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创建的内存对象中,以提高性能。如果您需要更新DOM本身内的data-to
属性,则需要使用attr()
代替:
$('.numClients').attr('data-to', data.numClients); // set the value
var numClients = $('.numClients').attr('data-to'); // get the value