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资源管理器显示<td class="y6" style="display: none;">正确设置了display样式，但在同一页面的调试器中，display样式未设置，看起来像{{1} }。我认为这是问题发生的地方。

为什么会这样？视觉上该列是隐藏的，但它仍然是计算的。有没有更好的方法来查找列中的<td class="y6">控件是否显示？

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

Answer 1

jQuery hide / show functions - 正在使用 display 样式。使用＆＃34;：visible＆＃34; 选择器，您可以查找可见性样式。

Answer 2

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

正如上面的评论所述，.is(':visible')确实会检查display样式以及opacity和visibility，因此在这种情况下是有效用途。有关其使用的示例，请参阅 this jsfiddle 。

编辑虽然根据 this jsfiddle ，.is(':visible')功能似乎仅适用于{{1风格而不是display / visibility ......可能需要一个新问题。

编辑2：根据jQuery API Documentation上述编辑是正确的：

具有可见性的元素：隐藏或不透明度：0被视为可见，因为他们仍然在布局中消耗空间。

因此，与其他答案相反，'：visible'选择器明确检查opacity样式，display和visibility: hidden在与opacity: 0一起使用时将返回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   display是“none”，或者它的任何父/祖先元素的显示是   “none”，或者元素的宽度为0且元素的高度为0   那么一个元素将被报告为隐藏。

进行此切换有什么好处？结果是双重的：*   表现更好，更好。（见下文。）*元素是   如果它在一个“隐藏”元素内部报告为“隐藏”（某些东西   以前是不可能的，不使用插件。

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

隐藏的控件被jQuery看作可见

2 个答案: