Question

我正在使用data-percent属性，但我需要它是可变的。我正在使用JavaScript从文本文件中获取数据，需要将其插入到数据百分比值

中

这样做会很好

 data-percent=".change"

或

 $('#test').attr('data-percent', '.change');

这是我正在使用的

 <div class="wrap">

     <div class="holder">
       <div id="test" class="one" data-percent="85%"><span class="label">one</span>
       </div>
     </div>

    <script type="text/javascript">                                                             
     setTimeout(function start() {

       $('.bar').each(function (i) {
       var $bar = $(this);
       $(this).append('<span class="count"></span>')
       setTimeout(function () {
        $bar.css('width', $bar.attr('data-percent'));
        }, i * 100);
       });

        $('.count').each(function () {
       $(this).prop('Counter', 0).animate({
        Counter: $(this).parent('.bar').attr('data-percent')
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now) + '%');
        }
    });
});

}, 500)

    </script>                                           
</div>

这是我从文本文件中获取数据的javascript。这是我需要用

替换静态数据百分比值的数据

    var XHR = new XMLHttpRequest();
     XHR.open("GET", "file.txt", true);
     XHR.send();
     XHR.onload = function (){
     var change = document.getElementById("one").innerHTML = ( XHR.responseText.slice(6, XHR.responseText.indexOf("\n")) );
     };

Answer 1

使用一个实际指向css类（'one'）的参数调用

getElementById

更改此行：

var change = document.getElementById("one").innerHTML = ( XHR.responseText.slice(6, XHR.responseText.indexOf("\n")) );

对此：

var change = XHR.responseText.slice(6, XHR.responseText.indexOf("\n"));
$('#test').attr('data-percent', change);
$('.label').text(change); // to display the value in span

HTML JavaScript变量data-percent属性

1 个答案: