Question

我正在创建一个网站，我将进度条附加到来自JSON文件的div。一切都运转良好，但我无法弄清楚如何用自己的价值动画所有进度条。

这些值是从JSON文件加载的，我只能将它们全部设置为一个值而不是它们自己的值。

代码：

$.getJSON( "skills.json", function(data){
  Skills = data;

  $.each(Skills, function (title, val) {
  var markup = "<div class='progress-item'>";
  markup += "<span class='progress-title'>" + val.title + "</span>";
  markup += "<div class='progress'>";
  markup += "<div class='progress-bar'" + "style=width:" + val.value + "%" + ">" + "<span class='progress-percent'>" + val.value + "%" + "</span></div>";
  markup += "</div>";
  markup += "</div>";
  $('.progress-wrapper').append(markup);
  });
});

因此，这会生成3个进度条，因为我的JSON文件中有3个值。

我尝试过类似的事情：

$(".progress-bar").animate({width: val.value +"%"});

但它改变了我所有进度条的宽度，即使它们在JSON对象中有所不同。

JSON文件：

[{
    "title": "Skill 1",
    "description": "Skill 1 description",
    "value": 100
},
{
    "title": "Skill 2",
    "description": "Skill 2 description",
    "value": 50
}
]

提前感谢您的帮助

.Animate（）关于动态生成的内容

0 个答案: