为什么这个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();
});

通过不使用文档的ready处理程序,代码试图在浏览器解析文档时立即执行,并且目标元素尚不存在,因为它稍后在文档中.因此,代码是你的榜样运行,jQuery选择根本没有找到任何匹配的元素展现.

请注意,将两个互斥的语句放入文档的就绪处理程序中可能会有效,但是,如果不能保证它们执行的顺序,那么将条件包装在其中一个语句中是不是更有意义？完全删除顶部(调用.hide())并默认设置要隐藏的元素的样式.然后你的条件调用.show()将在需要时显示元素.(或者将其设置为默认显示,并取消隐藏条件.)

此外,您可能不需要使用JavaScript 在所有这一点.只需将元素本身包装在条件中,当条件不满足时,它将不会被发送到客户端:

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