Question

如果Model.SelectedSubProcessID的值为-2，我只会显示一个文本框。

<script>
    $(function () {
        $('#subProcessAdditionalDiv').hide();
    });
</script>

<div id="modifyForm" class="incidentBox" style="justify-content: flex-start !important; width: auto !important; padding-left: 20px; text-align: left; align-items: flex-start !important;">

    ...

    if (Model.SelectedSubProcessID == -2)
    {
        <script type="text/javascript">
            $('#subProcessAdditionalDiv').show();
        </script>
    }

    ...

</div>
<br />

<div id="subProcessAdditionalDiv" style="display:flex; margin-bottom:10px">
    @Html.LabelFor(m => m.SelectedSubProcessName, new { style = "margin-top: 2px" })<span>&nbsp;&nbsp;</span>
    @Html.TextBoxFor(m => m.SelectedSubProcessName, new { style = "width:500px; margin-left: 120px" })<span>&nbsp</span>
    @Html.ValidationMessageFor(m => m.SelectedSubProcessName)
</div>

即使if语句为true，行$('#subProcessAdditionalDiv').show();也不会执行，文本框仍然隐藏，为什么会这样？

Answer 1

您忘记将声明包装在文档的准备处理程序中，就像您之前所做的那样：

$(function () {
    $('#subProcessAdditionalDiv').show();
});

通过不使用文档的就绪处理程序，代码试图在浏览器解析文档时立即执行，并且目标元素还没有存在，因为它在文档的后面。因此代码在您的示例中运行，jQuery选择器根本找不到要显示的任何匹配元素。

请注意，将两个互斥的语句放入文档的就绪处理程序可能有效，但以防万一他们无法保证他们的顺序执行不会更有意义地将条件包装在一个的语句中吗？完全删除顶部（对.hide()的调用）并将该元素设置为默认隐藏的样式。然后，您对.show()的有条件调用将在需要时显示该元素。（或者将其设置为默认显示，并取消隐藏条件。）

此外，您可能根本不需要使用JavaScript 。只需将元素本身包装在条件中，当条件未满足时，它根本不会被发送到客户端：

@if (Model.SelectedSubProcessID == -2)
    <div id="subProcessAdditionalDiv" style="display:flex; margin-bottom:10px">
        ...
    </div>
}

为什么这个javascript没有执行

1 个答案: