Question

我有一点简单的HTML：

<input type="text" id="lk" />
<div id="showDiv">
    <input type="radio" name="lki" id="lki1" value="lki1"> <label for="lki1">Anywhere</label>
    <input type="radio" name="lki" id="lki2" value="lki2"> <label for="lki2">Start</label>
</div>

这个JS：

// page load
$(document).ready(function () {
  var bla = $('#lk').val();
  if(bla.length > 0){
    $('#showDiv').show();
  }
  else {
    $('#showDiv').hide();
  }
});

// show / hide the "showDiv" content when a user types into the #lk text input field
$('#lk').bind('keyup change',function(){
  if(this.value.length > 0){
    $('#showDiv').show();
  }
  else {
    $('#showDiv').hide();
  }
});

JS有两个部分。第一个应该显示`＃showDiv＆＃39;如果＆＃39; #lk＆＃39;文本输入字段包含数据。

第二个将显示/隐藏`#showDiv＆＃39;根据是否有人将数据输入到＃lk＆＃39;＃lk＆＃39;文本输入字段。

我遇到的问题是JS的第一部分，用于页面加载：

// page load
$(document).ready(function () {
  var bla = $('#lk').val();
  if(bla.length > 0){
    $('#showDiv').show();
  }
  else {
    $('#showDiv').hide();
  }
});

当页面首次加载时，`＃showDiv＆＃39;中的单选按钮。如果＆＃39; #lk＆＃39;那么div经常会暂时出现然后消失。文本输入字段为空。

当表单下方有内容时，内容似乎会跳转为`＃showDiv＆＃39; div出现然后很快被隐藏。

有没有更好的方法来隐藏`＃showDiv＆＃39;如果＆＃39; #lk＆＃39;页面首次加载时，文本输入字段是否为空？

Answer 1

div暂时显示，因为JavaScript需要时间下载并执行隐藏它的逻辑，因此要修复您需要默认隐藏元素然后在适当的时候切换它。 / p>

正如GolezTrol在评论中已经提到的那样，你可以使用display: none

来做到这一点

Answer 2

我会添加此CSS规则来设置未显示DIV的初始状态：

gather

（这会根据jQuery函数中的条件而改变，但是这个规则将确保在执行jQuery函数之前加载页面时DIV不会出现甚至几毫秒）

Answer 3

将以下代码直接添加到元素

中

style="display:none"

例如

<div id="showDiv" style="display:none">

这会在浏览器呈现元素时隐藏元素。如果你通过javascript隐藏它，那么在javascript有机会隐藏它之前，元素会被呈现并显示。

希望这有帮助。

Div暂时出现在页面加载中 - 如何阻止它这样做？

3 个答案: