jqueryのshow/hide機能はどのように機能しますか？

Question

私は要素のhidden属性で動作するトグル可視性機能に問題があります。トラブルが..私はそうのように、style.displayプロパティを切り替える方法に出くわした。これは、ブラウザの互換性を欠い、

この問題をグーグルで

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

ある

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

..butこれはサブ思えますディスプレイプロパティをblockに設定する汎用の表示/非表示機能を使用できないため、最適です。問題の要素が時々inlineか何かを持っていると思われる場合はどうなりますか？

jQueryはどのようにしてこの問題を解決しましたか？

Answer 1

olddisplayという名前のdata属性に古い値displayを格納し、その値を使用して、その要素を再度表示するときに復元します。 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はそれが最初にdata属性の現在の値display格納：

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

をそして単にnoneからdisplayプロパティを設定します。重要な部分：

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

注

上記のコードは、jQueryのバージョン1.6.2から取り出され、明らかにそれ以降のバージョンで変更されることです。