¿Cómo funciona la función mostrar/ocultar de jquery?

Question

Tengo un problema con la función de visibilidad de alternar que opera en el atributo hidden de un elemento. El problema es que este carece de compatibilidad con los navegadores ..

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

googlear este tema me encontré con el método de cambio de la propiedad style.display, al igual que ..

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

..pero esto parece sub- óptimo, porque no puede tener una función mostrar/ocultar genérica que establece la propiedad de visualización en block. ¿Y si el elemento en cuestión a veces se supone que tiene un inline o algo así?

¿Cómo, por ejemplo, jQuery resuelve este problema?

Answer 1

Almacena el antiguo valor display en un atributo data llamado olddisplay y luego usa el valor de eso para restaurarlo cuando se muestra el elemento de nuevo. See the implementation here. Puede verificar la implementación de cualquier método jQuery en ese sitio.

En los siguientes fragmentos de código he anotado la línea importante con un comentario //LOOK HERE.

La parte importante del método 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 
     } 
    } 
} 

Cuando hiding an element que en primer lugar, almacena el valor actual display en un atributo 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 
     } 
    } 
} 

Y luego simplemente establece la propiedad display a none. La parte importante:

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

Nota

El código anterior se ha tomado de la versión 1.6.2 de jQuery y es obviamente sujeto a cambios en versiones posteriores.