javascript - 如何使用动态分配输入 ID 的 JQuery 进度条？

Question

在 MVC 视图中创建的表的一部分：

它背后的一些HTML：

...
<tr>
    <td>
        <div id="implG13">252,849.00</div>
    </td>
    <td>
        <div id="progressBarG13"></div></td>
    <td>
        <div id="unimplG13">234,687.00</div>
    </td>
</tr>

<tr>
    <td>
        <div id="implG19">239,773.00</div>
    </td>
    <td>
        <div id="progressBarG19"></div></td>
    <td>
        <div id="unimplG19">174,397.00</div>
    </td>
</tr>
...

我希望能够Progress Bar在表格的每一行，在这两列之间显示一个，以图形方式表示已实施的“成本节约”百分比。

即对于第一行，JQuery 可能类似于：

function CalculatePercentage(){
    return ($("#implG13").val() / ($("#implG13").val() + $("#unimplG13").val()));
}

$("#progressbarG13").progressbar({
    $value : CalculatePercentage()
});

问题是表的行数可变。我可以以编程方式分配唯一 ID 来引用“已实现的成本节约值”、“未实现的成本节约值”和每行的进度条。

如何在 JQuery 中实现这一点，这样我就不必创建显式引用这些 ID 的新函数，有点像 C# 中的命名参数？

这是我第一次在 JQuery 中编程（JQuery 是一个 javascript 库还是什么？）所以请原谅我的天真！

Answer 1

类似的东西

HTML 标记

<tr>
    <td>
        <div class="impl" id="implG13">252,849.00</div>
    </td>
    <td>
        <div class="bar" id="progressBarG13"></div>
    </td>
    <td>
        <div class="unimpl" id="unimplG13">234,687.00</div>
    </td>
</tr>

Javascript（使用 jquery）

$("tr").each(function(){
    var $tr = $(this);
    var impl = $tr.find(".impl").val();
    var unimpl = $tr.find(".unimpl").val();
    $tr.find(".bar").progressbar({
        $value : impl/(impl+unimpl)
    });
});

Answer 2

您可以在 jQuery 中使用一些更复杂的选择器，例如以选择器开头的选择器。

$('[id^="progressbar"]').each(function() {
    var currentId = $(this).attr('id');
    var index = currentId.replace("progressbar",""); // This removes progressbar from the ID so you get the unique identifier
    var percentage = calculatePercentage(index);
    // Do something with percentage to display it somewhere.
});

function calculatePercentage(index) {
     return ($("#impl"+index).val() / ($("#impl"+index).val() + $("#unimpl"+index).val()));
}

您可以查看Bootstrap Progress Bars以找到一些相对容易实现的内容。

祝你好运！