Javascript 被jQuery视为可见的隐藏控件

我有一张这样的桌子：

<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>

在中，您可以看到，如果注释掉行

$（'y6'）.hide（）

，则总数为1000（因为

MainContent\u txtNetMonthlyIncomeY6

值为1000），但如果未注释，则总数为0。但是，当从我的站点（而不是JSFIDLE）运行时，它的性能与我预期的一样，

$（This）.is（“：visible”）

始终返回

true

，因此总数始终为1000

检查DOM资源管理器显示

正确设置了

显示

样式，但在同一页面的调试器中未设置

显示

样式，看起来像

。我想这就是问题所在

为什么会发生这种情况？从视觉上看，该列已隐藏，但仍在计算中。是否有更好的方法来确定是否显示列中的

输入

控件

---

编辑：官方api似乎建议它与显示一起工作

jQuery隐藏/显示函数-使用显示样式。使用“：visible”选择器，您可以查找可见性样式

解决这个问题的方法只是我犯了一个简单的错误。我实际上是在计算后运行

$（'.y6'）.hide（）

代码，因此当计算发生时，它会显示出来。确保在计算开始之前调用了

hide（）

如上所述，

.is（“：visible”）

会检查

显示

样式以及

不透明度

和

可见性

，因此在这种情况下是有效的。有关其使用示例，请参见

编辑：尽管根据的规定，

.is（':visible'）

功能似乎只适用于

显示

样式，而不适用于

可见性

/

不透明度

…可能需要一个新问题

编辑2:按照上述编辑是正确的：

可见性为“隐藏”或不透明度为“0”的图元视为可见， 因为它们仍然会占用布局中的空间

因此，与其他答案相反，“：visible”选择器专门检查

显示

样式，

可见性：隐藏

和

不透明度：0

在与

一起使用时将返回true。is（“：visible”）

方法

编辑3:从2009年2月开始，我们可以看到：

这就是逻辑的变化方式：*在jQuery1.3.1（及更早版本）中 元素是可见的，如果它的CSS“display”不是“none”，那么它的CSS “可见性”不是“隐藏的”，其类型（如果是输入）是 不是“隐藏的”。*在jQuery 1.3.2中，如果元素的 浏览器报告的偏移网络宽度或偏移视线大于0

这一变化意味着什么？这意味着如果元素的CSS display为“none”，或其任何父/父元素的显示为 “无”，或者如果元素的宽度为0，而元素的高度为0 然后，元素将被报告为隐藏

进行此切换的好处是什么？结果有两个方面：* 演出好多好多好多了。（见下文。）*元素为 如果它位于“隐藏”元素内（即 如果不使用插件，以前是不可能的

---

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

为什么它在JSFIDLE中工作……官方api似乎建议它与显示一起工作。

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