jquery进度条arr答案

【问题标题】：Jquery progress bar arrjquery进度条arr
【发布时间】：2016-12-17 11:25:25
【问题描述】：

我想制作一个像 example 这样的 prog bar，我希望 prog bar 是一个 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');

我的 index.html 代码

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

【问题讨论】：

标签： jquery html progress-bar

【解决方案1】：

您是否遇到任何可以分享的错误？

由于您使用 Object 来设置值，因此您应该将 50px 更改为 50（50px 无论如何都不是有效值，因为它是一个字符串并且应该有 quetes）值应该是一个数字 http://api.jqueryui.com/progressbar/#option-value

另外——你正在创建多个#progressbar，这样会在这里产生问题：

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

你不应该重复使用 id's (ever) 并且你将进度条设置为像

这样的对象

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

【讨论】：