使用jQuery变量作为HTML属性

时间:2018-07-25 15:15:16

标签: javascript jquery html

您可能会告诉我在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);
    });

1 个答案:

答案 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