show(). Parent(). Show() - Điều gì đang xảy ra ở đây?

Question

Tôi không hiểu điều gì xảy ra khi bạn thực hiện một chuỗi .show() như thế. Tôi cũng không viết mã này hoặc có ý tưởng về cách tìm ra những gì đang xảy ra ở đây. Do đó câu hỏi này.

// Remove favorite category 
     $(".FavoriteRemove").click(function() { 
      var cat = $(this).parents(".Category");  //the parent of the clicked item is the category/bundle 
      var catid = $(this).attr("catid");   //the id tag on the clicked item is the BundleID 
      $.post($(this).attr("href"), function() { //the href tag is the post URL for adding a favorite 
       cat.remove();       //here we remove the category/bundle 

//*** WHAT IS THIS DOING? v 
      $(".Category[catid=" + catid + "]").show().parent().show(); 
//*** NO THAT UP THERE^
      if ($(".FavoriteCategories div").length == 0) 
       $(".FavoriteCategories").hide(); 
      //bindCategories(); 
     }); 
     return false; 
    }); 

Ai đó có thể mô tả ý nghĩa của điều này? Tôi biết mục tiêu là lớp 'Danh mục' với thuộc tính khớp với ID nhưng tôi không hiểu chuỗi chức năng có ý nghĩa gì.

Cảm ơn.

Answer 1

• Đầu tiên show()^(docs) các phần tử với lớp Category, và catid thuộc tính với giá trị của biến nhất định.
• Sau đó đi ngang đến cha mẹ của mình bằng phương pháp parent()^(docs).
• Sau đó, show()^(docs) phụ huynh.

"Hiển thị" có nghĩa là thiết lập thuộc tính phong cách display từ none với giá trị ban đầu (hoặc mặc định) của nó, giống như block.

Answer 2

Trong JavaScript, bạn có thể trực tiếp "sử dụng" giá trị trả lại của cuộc gọi hàm mà không gán giá trị cho biến. Here is a stripped down example:

var john = { 
    me: function() { 
     alert('...John'); 
    } 
} 

var foo = { 
    call: function() { 
     alert('You called..'); 
     return this;  // <- note that an object is returned  
    },      // (in this case foo itself but could be any object) 

    callSomeoneElse: function() { 
     alert('You called..'); 
     return john;  // <- note that an object is returned 
    }, 

    me: function() { 
     alert('...me'); 
    } 
} 

foo.call().me() 
foo.callSomeoneElse().me() 

---

Bây giờ để gọi phương pháp của bạn:

Nếu bạn có

$(selector).show() 

sau đó các yếu tố được lựa chọn sẽ được hiển thị. show trả lại một tập hợp các phần tử đã chọn (cùng các yếu tố được chọn bởi $(selector)). Điều này cho phép chúng ta gọi một phương thức khác trên chúng: parent() chọn (trả về) các nút cha của các phần tử này (vì vậy chúng ta có một tập hợp khác) và show() thứ hai hoạt động trên tập hợp (cha mẹ) mới này (và trả về tập cha).

Vì vậy

$(selector).show().parent().show() 

sẽ hiển thị các yếu tố được lựa chọn và cha mẹ của họ.

---

Toàn bộ khái niệm được gọi là fluent interface và đạt được thông qua method chaining.

Answer 3

$(".Category[catid=" + catid + "]").show().parent().show(); 

Nó sẽ hiển thị (chắc có thể nhìn thấy) các yếu tố (s) với một lớp Category và một bộ CatID vào biến CatID, và nó sẽ hiển thị các yếu tố phụ huynh:

<div> 
    <span class="Category" catid="1"></span> 
</div> 

Trong trường hợp này nó sẽ hiển thị cả nhịp và div.