如何使用jQuery進行元觸發

Question

我在頁面上有多個div。在每個div的右上角是一個圖標。當用戶點擊一個圖標時，它顯示/隱藏div。下面的代碼：

$('div#display-area').on('click', 'span.fold-post-link', function() {   
    $('div.fold-post', $(this).parents('div.display-content')).toggle('blind'); 
}); 

現在，在頁面的最頂端，我有兩個圖標 - 一個是向上的箭頭，另一種是向下箭頭。當用戶點擊向上箭頭時，我想讓它隱藏所有的div;當他們點擊向下箭頭時，我想顯示所有的div。

起初我以爲我可以用一個功能做到這一點，比如這個：

// fold and unfold all posts 
$('div#display-area').on('click', '#master-folder', function() {  
    $('div.fold-post', 'div#display-area').toggle('blind'); 
}); 

但是，這是沒有好，因爲它每次訪問的div和反轉其狀態。這意味着如果我有幾個可見的div，它們就會隱藏起來，反之亦然！

Answer 1

我不認爲你可以使用單一的方法去做

$('div#display-area').on('click', '#up-folder', function() {  
    $('div.fold-post', 'div#display-area').hide('blind'); 
}); 
$('div#display-area').on('click', '#down-folder', function() {  
    $('div.fold-post', 'div#display-area').show('blind'); 
}); 

另一個想法是如下

$('div#display-area').on('click', '#up-folder, #down-folder', function() {  
    var action = $(this).is('#up-folder'); 
    $('div.fold-post', 'div#display-area')[action]('blind'); 
}); 

Answer 2

var action = 'hide'; 

$('div#display-area').on('click', '#master-folder', function() {  
    var $divs = $('div.fold-post', 'div#display-area'); 
    if (action == 'hide') { 
     $divs.hide('blind'); 
     action = 'show'; 
    } 
    else { 
     $divs.show('blind'); 
     action = 'hide'; 
    } 
});