javascript - 为动态创建的 JQuery 进度条设置值

Question

我有基于数据库查询结果集中的行生成的进度条(通过 MVC Razor 获得):

foreach (var @row in rows) {
    <li>
        <div class="progress-bar id-@row.id"></div>
        <div class="label">@row.Name</div>
    </li>
}

查询结果有一个名为@row.Value 的列，这是进度条需要的值，但我正在尝试弄清楚如何在创建每个进度条时为它设置该值。我尝试了各种 JQuery 选择器，以及在进度条 div 之后立即调用 JavaScript 函数并传入 @row.Value，但我似乎无法让它工作。

此外，进度条是标准的 JQuery 进度条，目前是这样设置的:

$('.progress-bar').progressbar();

关于如何实现这一点有什么建议吗？

编辑:

这最终对我有用:

$('#active-skill-list').find('li').each(function () {
    var progressBar = $(this).find('.progress-bar');
    progressBar.progressbar({
        value: progressBar.data('value')
    })

Answer 1

如果您谈论 jquery UI 进度条，您只需将该值添加到您的 dom 中即可

foreach (var @row in rows) {
     <li>
       <div class="progress-bar id-@row.id" data-value="@row.value"></div>
        <div class="label">@row.Name</div>
    </li>
}

//在你的 js 部分有这样的东西

$('YourUlContainer').find('li').each(function(){
    $(this).progressbar({ value: $(this).data('value') });
})

目标是将该值添加到 dom 中，并用它们的值触发每个 li。但我建议您通过使用 css 来更简单地做到这一点，除非有必要，否则用 js 更改它的值而不是使用插件。