2

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

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

7 回答 7

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

更正：

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

于 2012-05-06T15:58:37.940 回答
3

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

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

使用三元运算符表示：

  • （定义变量）声明 ？
  • 如果陈述为真，则 采取行动：
  • 如果陈述为假 ，则采取行动；

演示 JSFIDDLE

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

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

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

于 2012-05-06T16:05:56.450 回答
2

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

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

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

http://jsfiddle.net/WKWNc/2/

更新：

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

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

http://jsfiddle.net/WKWNc/1/

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

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

http://jsfiddle.net/WKWNc/

于 2012-05-06T16:01:59.560 回答
2

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

来源：https ://css-tricks.com/almanac/selectors/e/empty/

于 2016-03-15T20:35:33.890 回答
0

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

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

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

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

于 2012-05-06T16:00:43.007 回答
0

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

if ($("#php-errors").html() == "") {
    $("#php-errors").css("display", "block");
}
else {
    $("#php-errors").css("display", "none");
}
于 2012-05-06T16:01:35.850 回答
0

我会做这样的事情：

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

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

希望能帮助到你

于 2012-05-06T16:21:24.277 回答