2012-01-23 12 views
8

Mam problem z funkcją przełączania widoczności, która działa na atrybucie elementu o wartości hidden. Kłopot w tym, to brak kompatybilności przeglądarki ..Jak działa funkcja pokaż/ukryj jQuery?

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

Googling ten problem natknąłem się na metodzie przełączania właściwość style.display, tak jak ..

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

..ale to wydaje sub- optymalne, ponieważ nie można mieć ogólnej funkcji pokaż/ukryj, która ustawia właściwość wyświetlania na block. Co się stanie, jeśli dany element ma czasami mieć wartość inline?

W jaki sposób jQuery rozwiązuje ten problem?

+3

Przejdź do [źródło] (https://github.com/jquery/jquery/blob/master/src/effects.js#L19), aby dowiedzieć się ;-) –

+2

@Didier Ghys, zrobiłem, byłem mam tylko nadzieję, że ktoś mi to wyjaśni :-) – jenswirf

Odpowiedz

15

Przechowuje starą display wartość atrybutu data zwanego olddisplay a następnie wykorzystuje wartość, że aby przywrócić go po raz kolejny pokazując element. See the implementation here. Możesz sprawdzić implementację dowolnej metody jQuery w tej witrynie.

W poniższych fragmentach kodu dodałem komentarz do ważnej linii z komentarzem //LOOK HERE.

Ważną częścią metody 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 
     } 
    } 
} 

Kiedy hiding an element to najpierw przechowuje aktualną display wartość atrybutu 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 
     } 
    } 
} 

A potem po prostu ustawia właściwość nonedisplay. Ważną część:

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

Uwaga

Powyższy kod jest pobierana z jQuery w wersji 1.6.2 i jest oczywiście ulec zmianie w późniejszych wersjach.