How does jquery's show/hide function work?

问题

I have a bit of an issue with a toggle visibility function which operates on the hidden attribute of an element. Trouble is, this lacks browser compatibility..

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

Googling this issue I came across the method of toggling the style.display property, like so..

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

..but this seems sub-optimal, because you can't have a generic show/hide function that sets the display property to block. What if the element in question sometimes is supposed to have a inline or something?

How does for example jQuery solve this issue?

回答1:

It stores the old display value in a data attribute called olddisplay and then uses the value of that to restore it when showing the element again. See the implementation here. You can check the implementation of any jQuery method on that site.

In the following code snippets I've annotated the important line with a //LOOK HERE comment.

The important part of the show method:

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
        }
    }
}

When hiding an element it firstly stores the current display value in a data attribute:

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
        }
    }
}

And then simply sets the display property to none. The important part:

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

Note

The above code is taken from jQuery version 1.6.2 and is obviously subject to change in later versions.

来源：https://stackoverflow.com/questions/8970184/how-does-jquerys-show-hide-function-work

标签

javascript

jquery

show-hide