Question

如果＆＃34; Field1＆＃34;（下拉列表）的值为＆＃34;是＆＃34;我正在使用JQuery显示＆＃34; Field2＆＃34;（下拉列表），否则保持＆＃34; ;字段2＆＃34;隐。这工作正常，除非我刷新执行以下操作的页面：

1）加载页面

2）检查＆＃34;是＆＃34; in＆＃34; Field1＆＃34;如果是这样，显示＆＃34; Field2＆＃34;，导致＆＃34;颤抖＆＃34;效果为＆＃34; Field2＆＃34; ＆＃34;示出了＆＃34;页面加载后。如果在页面加载发生之前执行此步骤会更好。

这是我目前的代码：

<script type="text/javascript">

$(document).ready(function () {

    if ($("#Field1").val()=="Yes") {
        //show the hidden div
        $("#Field2").show("fast");
    }
    else {
        //otherwise, hide it
        $("#Field2").hide("fast");
    }        
    $("#Field1").change(function () {
        // If checked
        if ($("#Field1").val() == "Yes") {
            //show the hidden div
            $("#Field2").show("fast");
        }
        else {
            //otherwise, hide it
            $("#Field2").hide("fast");
            $("#Field1").val("");
        }

    });


});
</script>

如果页面未刷新，上面的代码可以正常工作。那我怎么能显示＆＃34;在页面加载之前的Field2，删除这个＆＃34;颤抖＆＃34;实现

非常感谢提前。

编辑：

得到了Cerbrus的回答。

基本上我使用＆＃34; display：none＆＃34;隐藏了周围的DIV。然后＆＃34;显示＆＃34;一旦JS逻辑处理完毕。然而关键是要包括：

 setTimeout(function () { $("#WrapperDiv").show(); }, 20);

Answer 1

您最好的选择是使用CSS将两个字段设置为隐藏，然后根据#Field1的值显示其中一个字段。

这样的事情：

＆＃13;

alert("Simulating page load");
setTimeout(function(){
    $("#Field2").show(); // Your logic to choose the correct field, here.
}, 2000);

＆＃13;

input.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Field1" value="Field 1" class="hidden"/>
<br />
<input type="text" id="Field2" value="Field 2" class="hidden"/>

＆＃13;

如何在刷新之后在页面出现之前使用JS显示元素

1 个答案: