当 innerHTML 为空时隐藏 div答案

【问题标题】：Hiding a div when the innerHTML is null当 innerHTML 为空时隐藏 div
【发布时间】：2012-05-06 15:58:05
【问题描述】：

我对 jQuery 很陌生，但我试图获得一个代码设置，当“innerHTML”为空时隐藏一个 div。我尝试使用下面的代码。但它不起作用！我的错在哪里？？

if (($("#php-errors").html).length) {
    $("#php-errors").css("display", "block");
}
else {
    $("#php-errors").css("display", "none");
}

【问题讨论】：

【解决方案1】：

一行，并使用.show() 和.hide() 方法：

var hasCont = $("#php-errors").contents().length ? $("#php-errors").show() : $("#php-errors").hide();

使用 三元运算符 表示：

一个好的做法是将你的元素缓存在一个 var 中，我们称之为var $el，并像这样使用它：

var $el = $("#php-errors");
var hasCont = $el.contents().length ? $el.show() : $el.hide();

更具可读性，并且它将为您节省一些微处理时间；）但它确实有助于跨函数的可重用性（如果在函数之外定义。）

【讨论】：

【解决方案2】：

if ($("#php-errors").html().length) {
    $("#php-errors").css("display", "block");
}
else {
    $("#php-errors").css("display", "none");
}

更正：

($("#php-errors").html).length 应该是$("#php-errors").html().length

【讨论】：

【解决方案3】：

你可以像这样清理你的代码。

它还使用innerHTML 属性作为三元表达式的条件部分。如果有内容，则返回并设置“block”，如果没有，则“none”。

$("#php-errors").css("display", function() {
    return this.innerHTML ? "block" : "none";
});

更新：

如果这仅在页面加载时运行，您可以先将其设置为“阻止”，然后再执行此操作。

$("#php-errors:empty").hide();

或相反，将其设置为“无”，如果不为空则显示。

$("#php-errors:not(:empty)").show();

【讨论】：

【解决方案4】：

只是添加不需要javascript的css方式以防其他人需要它：

.php-errors:empty { display: none; }

将匹配：

<div class="php-errors"></div>
<div class="php-errors"><!-- test --></div>

将不匹配：

<div class="php-errors"> </div>
<div class="php-errors">
   <!-- test -->
</div>

<div class="php-errors">
</div>

【讨论】：

【解决方案5】：

对于您的情况，您似乎只是想要：

$("#php-errors").toggle();

如果尚未设置，我看不出您要将显示设置为 block 或 none。

你确定你的逻辑不是多余的吗？

【讨论】：

【解决方案6】：

我想你错过了比较，试试这个

if ($("#php-errors").html() == "") {
    $("#php-errors").css("display", "block");
}
else {
    $("#php-errors").css("display", "none");
}

【讨论】：

【解决方案7】：

我会这样做：

var $php_errors = $("#php-errors");

if ($php_errors.is(":empty")) {
    $php_errors.hide()
}
else {
    $php_errors.show();
}

希望对你有帮助

【讨论】：