jquery verwenden ein Bootstrap-Fortschrittsbalken zu initialisieren

Question

ich ein Bootstrap-Fortschrittsbalken verwenden, die auf Null

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

Ich verwende den folgenden jQuery-Code festgelegt wird den Fortschrittsbalken

$.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); 
    }); 

I zu initialisieren bekomme ich gültige Daten von der Ajax Anfrage,

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

Aber der Fortschrittsbalken wird nicht aktualisiert. Wenn ich die Leiste im HTML initialisiere, um bei 1% zu beginnen, funktioniert es mit dem obigen Code. Gibt es eine Möglichkeit, dies mit jQuery zu initialisieren?

Answer 1

Sie müssen "%" hinzufügen, wenn Sie die Breite des Fortschrittsbalkens festlegen;

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

JQuery Lösung

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