javascript - 隐藏控件被 jQuery 视为可见

Question

我有这样一张表:

<table class="RepaymentTable">
    <thead>
        <tr>
            <td style="width: 200px;">

            </td>
            <td>
                %
            </td>
            <td class="y1">
                Year 1
            </td>
            <td class="y2">
                Year 2
            </td>
            <td class="y3">
                Year 3
            </td>
            <td class="y4">
                Year 4
            </td>
            <td class="y5">
                Year 5
            </td>
            <td class="y6">
                Year 6
            </td>
            <td>
                Total
            </td>
            <td>
                Return for creditors
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <span id="MainContent_lblNetMonthlyIncome">Net Monthly Income</span>
            </td>
            <td>

            </td>
            <td class="y1">
                €<input name="ctl00$MainContent$txtNetMonthlyIncomeY1" class="RepaymentValue" id="MainContent_txtNetMonthlyIncomeY1" style="width: 60px;" type="text" value="0.00">
            </td>
            <td class="y2">
                €<input name="ctl00$MainContent$txtNetMonthlyIncomeY2" class="RepaymentValue" id="MainContent_txtNetMonthlyIncomeY2" style="width: 60px;" type="text" value="0.00">
            </td>
            <td class="y3">
                €<input name="ctl00$MainContent$txtNetMonthlyIncomeY3" class="RepaymentValue" id="MainContent_txtNetMonthlyIncomeY3" style="width: 60px;" type="text" value="0.00">
            </td>
            <td class="y4">
                €<input name="ctl00$MainContent$txtNetMonthlyIncomeY4" class="RepaymentValue" id="MainContent_txtNetMonthlyIncomeY4" style="width: 60px;" type="text" value="0.00">
            </td>
            <td class="y5">
                €<input name="ctl00$MainContent$txtNetMonthlyIncomeY5" class="RepaymentValue" id="MainContent_txtNetMonthlyIncomeY5" style="width: 60px;" type="text" value="0.00">
            </td>
            <td class="y6">
                €<input name="ctl00$MainContent$txtNetMonthlyIncomeY6" class="RepaymentValue" id="MainContent_txtNetMonthlyIncomeY6" style="width: 60px;" type="text" value="1000.00">
            </td>
            <td>
                <span id="MainContent_lblNetMonthlyIncomeTotal">€  1000.00</span>
            </td>
            <td>

            </td>
        </tr>
    </tbody>
</table>

我想计算 input 的总和行中的字段，但使用 $('y6').hide() 隐藏了一些列.我使用以下 jQuery 查找每一列并计算总数:

var NetMonthlyIncomeTotal = 0;
$("input[id*='txtNetMonthlyIncomeY']").each(function () {
    if ($(this).val() != "" && $(this).is(":visible"))
        NetMonthlyIncomeTotal += parseFloat($(this).val());
});

this jsfiddle 你可以看到，如果你注释掉 $('y6').hide() 这行则总数为 1000(如 MainContent_txtNetMonthlyIncomeY6 值为 1000)，但如果您未对其进行注释，则总数为 0。这按我的预期执行，但是当从我的站点而不是 jsfiddle 运行时，$(this).is(":visible")总是返回 true因此总数始终为 1000。

检查 DOM Explorer 显示 <td class="y6" style="display: none;">正确设置 display样式，但在同一页面的调试器中 display样式未设置，看起来像 <td class="y6"> .我认为这就是问题发生的地方。

为什么会这样？从视觉上看，该列已隐藏，但仍会进行计算。有没有更好的方法来查找 input 是否存在？显示列中的控件？

编辑:官方 api 似乎建议它适用于显示。 http://api.jquery.com/visible-selector/

Answer 1

jQuery 隐藏/显示功能 - 使用显示 样式。使用":visible" 选择器，您需要寻找visibility 样式。