隐藏的控件被 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 隐藏/显示函数 - 使用 display 样式。并使用 ":visible" 选择器寻找 visibility 样式。

Answer 2

解决这个问题只是我的一个简单错误。我实际上是在计算之后运行$('.y6').hide() 代码，所以当计算发生时它会显示出来。确保hide() 调用是在计算使其工作之前进行的。

正如上面 cmets 中提到的，.is(':visible') 确实检查了display 样式以及opacity 和visibility，因此在这种情况下是有效的使用。请参阅 this jsfiddle 了解其使用示例。

编辑：虽然根据 this jsfiddle，.is(':visible') 函数似乎只适用于 display 样式而不是 @ 987654333@/opacity...可能需要一个新问题。

编辑2：按照jQuery API Documentation上面的编辑是正确的：

具有可见性的元素：隐藏或不透明度：0 被认为是可见的， 因为它们仍然会占用布局中的空间。

因此，与其他答案相反，':visible' 选择器专门检查 display 样式，visibility: hidden 和 opacity: 0 在与 .is(':visible') 方法一起使用时将返回 true。

编辑 3： 从 2009 年 2 月开始就是这种情况，我们可以在 release notes of jQuery 1.3.2 中看到：

这就是逻辑的变化方式： * 在 jQuery 1.3.1（和更早的版本）中 如果元素的 CSS “display”不是“none”，则元素是可见的，它的 CSS “可见性”不是“隐藏”的，它的类型（如果是输入）是 不是“隐藏”的。 * 在 jQuery 1.3.2 中，一个元素是可见的，如果它 浏览器报告的 offsetWidth 或 offsetHeight 大于 0。

这种变化意味着什么？这意味着如果你的元素的 CSS 显示为“无”，或其任何父/祖先元素的显示为 “无”，或者如果元素的宽度为 0 而元素的高度为 0 那么一个元素将被报告为隐藏。

进行此转换有什么好处？结果是双重的：* 性能好多了，好多了。 （见下文。） * 一个元素是 如果它在“隐藏”元素中，则报告为“隐藏”（ 以前不使用插件是不可能的。

所以这种情况已经有一段时间了。