jquery div隐藏在第一次加载时不起作用答案

【问题标题】：jquery div hide not working on first loadjquery div隐藏在第一次加载时不起作用
【发布时间】：2016-12-01 00:18:28
【问题描述】：

我正在使用远程 JavaScript 来填充我网站上的两个 div。

<div id="flix-inpage"></div>

<div id="ccs-inline-content"></div>

如果内容在两个 div 上都可用，我将使用以下代码仅显示一个 div。我已将此代码添加到页面底部：

$(document).ready(function(){
    setTimeout(function() {
        if ($("#flix-inpage #inpage_responsive").length > 0) {
            $("#ccs-inline-content").hide();
        } else {
            $("#ccs-inline-content").show();
            return false;
        }
    }, 2000);
});

我已经指定了一个 css 类：

#ccs-inline-content{
    display: none;
}

如果两个 DIV 的内容相同

我遇到的问题是#ccs-inline-content 在第一次加载时没有隐藏。如果我重新加载页面几次然后#ccs-inline-content - hide() 踢，否则内容是可见的。

我尝试了不同的浏览器，但结果相同。

【问题讨论】：

尝试删除 setTimeout
setTimeout 只执行一次，在你的情况下是 2 秒后。填充div是否需要更长的时间？如果是这样，您可能需要考虑 setInterval 而不是它将在一定间隔内重复运行该函数。 w3schools.com/jsref/met_win_settimeout.asp
它对我来说立即隐藏了 - 由于 CSS 而不是 JQuery（因为由于setTimeout，这会在 2 秒后启动）。检查这个Codepen
@C. Smith setInterval 成功了。谢谢

标签： javascript jquery html css

【解决方案1】：

我测试了这段代码，但运行良好。只是我在这段代码中添加了 .text() 函数

$(document).ready(function(){
    setTimeout(function() {
        if ($("#flix-inpage").text().length <= 0 ) {
             $("#ccs-inline-content").show();
        } else {
             $("#ccs-inline-content").hide();
        }
    }, 2000);
});

#ccs-inline-content{
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="flix-inpage">12</div>

<div id="ccs-inline-content">ok</div>

【讨论】：

【解决方案2】：

如果我理解正确，您希望显示#flix-inpage 并隐藏#ccs-inline-content，除非#flix-inpage 为空。这样就可以了：

$(document).ready(function() {
  if ($("#flix-inpage").children().length) {
    $("#ccs-inline-content").hide();
  } else {
    $("#ccs-inline-content").show();
  }
});

你需要确保你提到的其他脚本在运行之前完成，所以把它放在你执行其他两个之后的某个地方，在<body>标签的底部。

【讨论】：