如何使用动态分配输入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()
});

问题是Table有可变行数。我可以通过编程方式分配唯一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

您可以使用一些more complex selectors in 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以找到一些相对容易实现的内容。

祝你好运！