jQuery的進度條改編

Question

我要讓這樣一個example前衛的酒吧，我想前衛的酒吧是一個ARR和建造從js文件，而不是在index.html的

$progAdd = $('<div>', { 
    'id': 'proggg' 
}); 

var progress = [ 
    { 
     name: 'aaaa', 
     value:50px 
    }, 
    { 
     name: 'bbbb', 
     value:20px 
    } 
]; 

    for(i in progress) { 
    var $tempProg = $('<li>'); 

    $tempProg.append('<div id="progressbar" style="width:100px;"></div>'); 
      $(function() { 
$("#progressbar").progressbar({ 
    value: progress[i].value 
}); 
    $progAdd.append($tempProg); 
} 
$progAdd.appendTo('#pro-skills'); 

我的索引。 html代碼

<section id="pro-skills"> 
    <h1 class="ex-title">pro skills</h1> 
    </section> 

Answer 1

您是否收到任何可分享的錯誤？

，因爲你正在使用的對象設置的值，你應該改變50px到50（50像素是無效的價值無論如何，因爲它是一個字符串，並應具有其周圍quetes）值應該是一個數字http://api.jqueryui.com/progressbar/#option-value

也 - 要創建多個#progressbar，這樣將在這裏產生問題：

$("#progressbar").progressbar({ 
    value: progress[i].value 
}); 

你不應該重複使用的ID（曾經）和你的進度設置爲對象像

var $progBar = $('<div>'); 
$progBar.progressbar({ 
    value: progress[i].value 
}); 

另一個問題 - $tempProg是一個div，並要附加<li>它（<li>應該坐在裏面<ul>或<ol>等）

這樣試試：

var $progAdd = $('<ul>', { 
    'id': 'proggg' 
}); 

var progress = [ 
    { 
     name: 'aaaa', 
     value:50 
    }, 
    { 
     name: 'bbbb', 
     value:20 
    } 
]; 
for(i in progress) { 
    var $tempProg = $('<li>'); 
    var $progBar = $('<div>').width(100); 
    $tempProg.append($progBar); 
    $(function() { 
     $progBar.progressbar({ 
      value: progress[i].value 
     }); 
     $progAdd.append($tempProg); 
    }); 
} 
$progAdd.appendTo('#pro-skills');