聲明一個變量而不返回值。

Question

嘿，大家好我是新來的jQuery和JS一般，有一個非常簡單的問題，基本上我遇到了一個排序腳本在線，我試圖瞭解什麼通過jQuery的文檔要怎麼回事：

腳本是如下：

$(function() { 
     var buttons = $('#fruit,#vegetable,#meat').click(function() { 
      $(this).toggleClass('active'); 
      var classes = buttons.filter('.active').map(function() { 
       return this.id; 
      }) 
      .get().join(',.'); 
      $('div.fruit,div.vegetable,div.meat').hide(). 
       filter('.' + (classes || 'none')).show();    
       console.log(classes.get().join(',.')); 
     }); 
    }); 

這個腳本是基於以下HTML運行：

<div style="float:right; padding:25px;"> 
      <button id="fruit" class="active"><span>fruit</span></button> 
      <button id="vegetable" class="active">vegetable</button> 
      <button id="meat" class="active">meat</button> 
     </div> 

     <div> 
      <p>Trying to use buttons as an "or" case rather than "and." When choosing fuit or vegetable, I want to see tomato as part of each list, <em>not just</em> when both are selected.</p> 

     <div class="fruit"> 
      <p>apple</p> 
     </div> 

     <div class="vegetable"> 
      <p>pumpkin</p> 
     </div> 

     <div class="vegetable"> 
      <p>okra</p> 
     </div> 

     <div class="fruit"> 
      <p>orange</p> 
     </div> 

     <div class="meat"> 
      <p>beef</p> 
     </div>  


     <div class="fruit vegetable"> 
      <p>tomato</p> 
     </div>  

     </div> 

小提琴here。

現在我明白，只是下面的腳本的大部分：

對4家劇本的作者是使用下面的代碼：

   var classes = buttons.filter('.active').map(function() { 

現在按鈕沒有被返回的任何值，所以不應該是空的？

抑或是說下面（在同一行）：

  var buttons = $('#fruit,#vegetable,#meat').click(function() { 

筆者也隱含定義的按鈕，如：

var buttons = $('#fruit,#vegetable,#meat') 

有人能澄清這對我來說，因爲我正在努力掌握這個簡單的概念。

謝謝。

Alex-Z。

Answer 1

這是一個不尋常的圖案，但buttons確實是正確的聲明（和明確`）在聲明中閱讀：

var buttons = $(...).click(...); 

通過任何click事件沒有發生過上面的代碼將已執行的時間（自JS是單線程的），並且buttons已經包含了所需的一組元素，並且可以在回調中安全地使用。

這當然也依賴於很多jQuery方法「鏈」的方式 - 他們返回相同的對象上，他們被稱爲之一，所以最終結果是buttons不只是包含$('#fruit,#vegetable,#meat')

Answer 2

你假設是正確的。 buttons是在點擊事件綁定的同時定義的。在元素上運行的大多數jQuery方法（即由選擇器返回的）而不是jQuery名稱空間本身的靜態方法都是如此。所以：

var els = $('*').filter('.foo').attr('class', 'bar'); 

返回在同一時間通過和*匹配.foo的元素，而設置類bar。

jQuery使用了所謂的鏈接模式 - 也就是說，方法被一個接一個地鏈接在一起 - 這是一些推斷的分配，有些人反對這種模式。正如你所發現的，如果你對這種模式不太瞭解，分配可能很難推斷出來。