javascript - jquery 的显示/隐藏功能如何工作？

Question

我对切换可见性函数有点问题，该函数对元素的 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";
}

..但这似乎不是最佳选择，因为您无法使用将显示属性设置为 block 的通用显示/隐藏函数。如果有问题的元素有时应该有一个 inline 或其他东西怎么办？

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

Answer 1

它将旧的 display 值存储在名为 olddisplay 的 data 属性中，然后在显示元素时使用该属性的值来恢复它再次。 See the implementation here .您可以在该站点上检查任何 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
        }
    }
}

当 hiding an element它首先将当前的 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 版本，显然在以后的版本中可能会发生变化。