javascript - 当 innerHTML 为空时隐藏 div

Question

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

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

score 3 · Accepted Answer

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

更正：

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

score 3 · Accepted Answer

一行，以及使用.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();

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

score 2 · Accepted Answer

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

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

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

更新：

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

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

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

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

score 2 · Accepted Answer

只是添加不需要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>

score 0 · Accepted Answer

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

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

我看不出您想将显示设置为任何一个，block或者none如果没有设置。

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

我会做这样的事情：

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

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

希望能帮助到你

7 回答 7