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');