Question

即使我执行的代码显示所有其他具有相同后缀的div，我也有隐藏div的情况：$("[id$='-input-container']").show()

无论如何，一个特定的div仍然隐藏：$("#single-colorRange-color-input-container")。我想也许它会隐藏在代码中的某个地方，但是没有 - 在调用$inputContainers.show()之后我立即添加了日志记录（并且debugger语句会停止所有后续执行）：

console.log($("#single-colorRange-color-input-container").css('display'));      
$inputContainers.show();
console.log($("#single-colorRange-color-input-container").css('display'));
console.log($("#single-colorRange-color-input-container")[0].hidden);
console.log($("#single-colorRange-color-input-container").is(':hidden'));
debugger;

在调用none之前，将.show()记录为css / display值。这是预期的。

然后block被记录为调用.show()后的css /显示值。这是预期的。

然后将false记录为结果集的第一个（唯一）元素的hidden属性。这是预期的。

然后记录true作为调用.is(':hidden')的结果。这是意外。

.css('display')如何阻止，[0].hidden为假，.is(':hidden')为真？尽管调用了.show()，但实际上div仍然是隐藏的，如果有一些合理的解释，那么为这一个div添加特殊逻辑似乎是荒谬的。

Answer 1

根据jQuery documentation ，隐藏选择器可以针对以下任何情况返回true

CSS显示值为none。
它们是type =“hidden”的表单元素。
它们的宽度和高度明确设置为0.
隐藏了一个祖先元素，因此页面上不会显示该元素。

因为隐藏是一个非常简单的布尔值，并且显示是块我的猜测是它是由于最后三个中的一个，特别是最后一个点。确保所有祖先都可见。

Answer 2

元素的祖先可能会被隐藏，因此.is()可能会返回true。

Answer 3

element.hidden仅评估元素是否具有html5隐藏属性。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

此属性不得用于隐藏可能的内容合法地展示。例如，它不应该用于隐藏标签标签界面的面板，因为这是一个造型决定和显示它们的另一种风格将导致一个完美正确的页面。

jquery hidden是对对象可见性的评估

CSS显示值为none。
它们是type =＆＃34; hidden＆＃34;。
它们的宽度和高度明确设置为0.
隐藏了一个祖先元素，因此页面上不会显示该元素。

https://api.jquery.com/hidden-selector/

Answer 4

console.log($("#sic").css("display")); // Add css #sic { display : }

它显示html标记的默认属性。这意味着如果tag是block，它将被阻塞，如果它被隐藏，那么它将是none。

示例：

1）

<div id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : block

2。）

<div style="display:none" id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : none

结果：

console.log($("#sic").css("display")); // It create the css like #sic{display: }

使用CSS的完整属性，如果.is(':hidden')

，则无法获得

在你的情况下：我改变id值太久了。

<div id="sic">Hello
</div>


#sic {
  display : none;
}


console.log($("#sic").css("display")); // None
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // true

只需写完整的财产。

console.log($("#sic").css("display","block")); // displaying html
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // false

.css（＆＃39;显示＆＃39;）怎么能阻止，[0]。隐藏是假的，而.is（＆＃39;：hidden＆＃39;）是真的？

4 个答案: