jquery的show / hidefunction如何工作？

我对切换可见性函数有一些问题，该函数对元素的hidden属性进行操作。 麻烦的是，这缺乏浏览器兼容性..

 function hide(e) {$(e).hidden=true;} function show(e) {$(e).hidden=false;} 

谷歌搜索这个问题我遇到了切换style.display属性的方法，就像这样..

 function toggle(e) { document.getElementById(e).style.display = (document.getElementById(e).style.display == "none") ? "block" : "none"; } 

..但这似乎不是最佳的，因为您不能拥有将display属性设置为block的通用显示/隐藏function。 如果有问题的元素有时应该有inline或其他内容怎么办？

例如jQuery如何解决这个问题？

Answer 1

它将旧display值存储在名为olddisplay的data属性中，然后在再次显示该元素时使用其值来恢复它。 请参阅此处的实施 。 您可以检查该站点上任何jQuery方法的实现。

在下面的代码片段中，我用//LOOK HERE注释注释了重要的一行。

show方法的重要部分：

 for (i = 0; i < j; i++) { elem = this[i]; if (elem.style) { display = elem.style.display; if (display === "" || display === "none") { elem.style.display = jQuery._data(elem, "olddisplay") || ""; //LOOK HERE } } } 

隐藏元素时，它首先将当前display值存储在data属性中：

 for (var i = 0, j = this.length; i < j; i++) { if (this[i].style) { var display = jQuery.css(this[i], "display"); if (display !== "none" && !jQuery._data(this[i], "olddisplay")) { jQuery._data(this[i], "olddisplay", display); //LOOK HERE } } } 

然后只需将display属性设置为none 。 重要的部分：

 for (i = 0; i < j; i++) { if (this[i].style) { this[i].style.display = "none"; //LOOK HERE } } 

注意

上面的代码取自jQuery版本1.6.2，显然在以后的版本中会有变化。