在 JQuery 对话框中隐藏和显示 Div 内容答案

【问题标题】：Hide and Show Div content inside of a JQuery dialog在 JQuery 对话框中隐藏和显示 Div 内容
【发布时间】：2012-05-25 22:28:40
【问题描述】：

我在 Div 中有一个带有标签及其验证摘要的字段。它是模态 JQuery 对话框的一部分：

<table>
.
.
.
<div id="user-date-add">
                    <tr>
                        <td width="100">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.User.Date)
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.EditorFor(model => model.User.Date)
                                @Html.ValidationMessageFor(model => model.User.Date)
                            </div>
                        </td>

                    </tr>
                </div>
.
.
.

根据 JavaScript 函数内部的特定条件，我需要隐藏或显示此部分以及该 Div 内部的 Date 字段和相关数据

所以我尝试了：

   if(condition)
    {
     $("#user-date-add").hide();
    }
     else
    {
      $("#user-date-add").show();
    }

我也尝试过使用：

$("#user-date-add").trigger();

它不起作用。表单上的字段甚至不闪烁。是因为 div 是在模态弹出窗口内呈现的吗？还是因为里面有输入标签？顺便说一下，Editor Date 字段显示为 DatePicker。

我怎样才能做到这一点？提前谢谢你。

【问题讨论】：

您的样本似乎不完整。如果这个 div 在模态对话框中，模态对话框在哪里声明？你什么时候想隐藏#user-date-add？是在显示对话框之前还是之后？
if 语句中的“条件”是否为 click()，您是否尝试过使用 live()？

标签： c# javascript jquery ajax model-view-controller

【解决方案1】：

假设对话框的 ID 为 dialog-box，那么您可以尝试使用 $('#dialog-box #user-date-add').hide(); 这可能是由于对话框的实例化方式，可能会留下现有的 div，这意味着您的 jQuery 选择器无法正常工作。

尝试在 Firefox 中使用 Firebug 或在 Chrome 中使用 Web Inspector 在控制台中尝试不同的变体，例如以下内容。

$('#user-date-add');
$('[id=user-date-add]');
$('[id=user-date-add');
$('.editor-label');

希望对你有帮助，戴夫

【讨论】：

Hmmm FireBUg 将我的 div 显示在表格之外，就像
似乎它根本不喜欢表格内部的 Divs.. .hmm
我不得不摆脱
并隐藏/显示实际行。谢谢大卫。 Firebug 提供了帮助。

【解决方案2】：

显然在表格单元格中包含 DIV 标记是无效的。

我删除了 div 并将 ID 添加到我需要 .Hide() / .Show() 的实际行中。

                <tr id="user-date-add">
                    <td width="100">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.User.Date)
                        </div>
                    </td>
                    <td>
                        <div class="editor-field">
                            @Html.EditorFor(model => model.User.Date)
                            @Html.ValidationMessageFor(model => model.User.Date)
                        </div>
                    </td>

                </tr>

【讨论】：