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

Hide and Show Div content inside of a JQuery dialog

本文关键字：显示 Div 内容 隐藏 JQuery 对话框      更新时间：2023-09-26

我在 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 中的日期字段和相关数据

所以我尝试了：

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

我还尝试利用：

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

它不起作用。窗体上的字段甚至不闪烁。是因为div 是在模态弹出窗口中呈现的吗？还是因为里面有输入标签？顺便说一下，"编辑器日期"字段显示为"日期选取器"。

我怎样才能使这项工作？提前谢谢你。

假设对话框的 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');

希望对您有所帮助，戴夫

显然，

在表格单元格内具有 DIV 标签是无效的。

我删除了div 并将 ID 添加到我需要的实际行中。隐藏（）/.显示（）。

                <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>
相关文章：