【问题标题】:Using jquery to initialise a bootstrap progress bar使用 jquery 初始化引导进度条
【发布时间】:2017-02-14 10:28:09
【问题描述】:

我正在使用设置为零的引导进度条

  <div class="progress-bar progress-bar-success" id="p1"
    role="progressbar" aria-valuenow="0"
    aria-valuemin="0" aria-valuemax="100" style="width:0%">

我使用下面的jquery代码来初始化进度条

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "myurl.php",
        data: data
    }).done(function(msg) {
    console.log(msg);
    var pid = msg.pid;
    var colour = msg.colour;
    var comp = msg.comp;
    console.log('pid = ' + pid);
    console.log('colour = ' + colour);
    document.getElementById(pid).style.width = comp;
    document.getElementById(pid).innerHTML = comp + '% Complete';   
    document.getElementById(pid).classList.add(colour); 
    });

我正在从 ajax 请求中获取有效数据,

Object {pid: "p1", comp: 7, colour: "progress-bar-success"}

但是,进度条没有更新。如果我将 html 中的栏初始化为从 1% 开始,它确实可以使用上面的代码工作。有没有办法使用 jquery 进行初始化?

【问题讨论】:

  • 您在添加宽度时是否错过了%?还是错字?

标签: javascript jquery ajax twitter-bootstrap


【解决方案1】:

设置进度条宽度的时候要加“%”;

document.getElementById(pid).style.width = comp + "%";

jquery解决方案

$("#"+pid ).css('width', comp + "%");

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-11-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多