javascript - 为什么这个 javascript 不执行

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