jquery的show/hide功能如何工作？

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值存储在一个data被调用的属性中olddisplay,然后在再次显示该元素时使用它的值来恢复它.请参阅此处的实施.您可以检查该站点上任何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,显然在以后的版本中会有变化.