Chức năng hiển thị/ẩn của jquery hoạt động như thế nào?

Question

Tôi có một vấn đề với chức năng hiển thị chuyển đổi hoạt động trên thuộc tính hidden của một phần tử. Vấn đề là, này thiếu khả năng tương thích trình duyệt ..

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

Googling vấn đề này tôi đã xem qua các phương thức chuyển đổi qua lại tài sản style.display, như vậy ..

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

..nhưng điều này dường như phụ tối ưu, bởi vì bạn không thể có chức năng hiển thị/ẩn chung đặt thuộc tính hiển thị thành block. Điều gì xảy ra nếu phần tử được đề cập đôi khi được cho là có một số inline hoặc gì đó?

Ví dụ: jQuery giải quyết vấn đề này như thế nào?

Answer 1

Nó lưu trữ giá trị display cũ trong thuộc tính data được gọi là olddisplay và sau đó sử dụng giá trị đó để khôi phục khi hiển thị lại thành phần. See the implementation here. Bạn có thể kiểm tra việc thực hiện bất kỳ phương thức jQuery nào trên trang web đó.

Trong đoạn mã sau tôi đã chú thích dòng quan trọng bằng một chú thích //LOOK HERE.

Phần quan trọng của phương pháp 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 
     } 
    } 
} 

Khi hiding an element nó trước hết lưu display giá trị hiện tại trong một thuộc tính 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 
     } 
    } 
} 

Và sau đó chỉ cần đặt display tài sản để none. Phần quan trọng:

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

Note

Đoạn mã trên được lấy từ jQuery phiên bản 1.6.2 và rõ ràng là có thể thay đổi trong phiên bản sau.