Question

我正在尝试使用Barfiller（https://github.com/9bitStudios/barfiller）。一切正常，但我想在span类（现在设置为“ 50”）中设置数据百分比值，以通过JQuery变量动态填充。

HTML

<div id="bar1" class="barfiller">
    <span class="tip"></span>
    <span class="fill" data-percentage="50"></span>
</div>

JavaScript

function onQuerySucceeded(data) {
    var projectstatus = data.d.projectstatus;
    $('#data-percentage').text(projectstatus);
}

关于，克里斯

Answer 1

$("#bar1 .fill").attr("data-percentage", projectstatus);

Answer 2

我更改了您的代码以使其正常工作。

您必须使用$(...).data( key, value)为 JQuery 中的data-...字段设置新值。

在 JS 中，您将使用.setAttribute("data-percentage", "50");。

$(document).ready( function () {
  console.log($(".fill").data('percentage'));
  onQuerySucceeded(40);
  console.log($(".fill").data('percentage'));
});

function onQuerySucceeded(data) {
    var projectstatus = data;
    $('#bar1 [data-percentage]').data('percentage', projectstatus);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bar1" class="barfiller">
    <span class="tip"></span>
    <span class="fill" data-percentage="50"></span>
</div>

Answer 3

我在执行onQuerySucceeded()函数之前添加了 2秒的超时，因为我认为这可能对您很方便，以防万一，您在制作api（服务）后加载了新百分比）致电。希望它对您有帮助：

$(document).ready(function() {
  console.log('data percentage: ' + $(".fill").attr('data-percentage'));
  
  setTimeout(() => {
    // after 2 seconds
    var responseJson = {};
    responseJson.d = { projectstatus: 15 };
    onQuerySucceeded(responseJson);
  }, 2000);
});

function onQuerySucceeded(data) {
  $('.fill').attr("data-percentage", data.d.projectstatus);
  console.log('data percentage: ' + $(".fill").attr('data-percentage'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bar1" class="barfiller">
    <span class="tip"></span>
    <span class="fill" data-percentage="50"></span>
</div>

如何将jquery变量添加到span类属性中？

3 个答案: