如何使用jQuery按列B過濾列A

我正在使用show/hide來顯示基於其類屬性的項目組。如何進一步過濾這些組項目，以便在B列中單擊的第二個結果集是第一個結果集的子集。根據我的閱讀材料，我認爲過濾器或兄弟姐妹可能持有這把鑰匙，但到目前爲止，我的實驗失敗了。如何使用jQuery按列B過濾列A

在這裏，我與所需的功能多一點的解釋更新：第一單擊列表中的項目，以顯示該列表的一個子集。單擊第二個列表中的項目以優化前一個子集。例如，在第1列中，單擊紅色以僅查看紅色項目。然後在第2欄中，單擊大號以僅查看較大的紅色項目。雖然仍在第2欄中，請點擊小圖標以查看只有小紅色的項目。應該可以按照這種方式進行過濾，直到回到第一列，該列將顯示該列表的新子集。

http://jsfiddle.net/TorontoDave/Ph98L/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 

    <head> 

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 

    <style> 
     * {font-family:arial} 
     .item div {height:50px; width:50px; color:white; font-weight:bold; float:left; margin:1px; text-align:center} 
     .nav {float:left} 
     li {float:left; list-style:none; padding-right:30px} 
     .item .small {font-size:1em} 
     .item .medium {font-size:2em} 
     .item .large {font-size:3em} 
     .item .red {background:red} 
     .item .green {background:green} 
     .item .blue {background:blue} 
     .item .orange {background:orange} 
     .item .purple {background:purple} 
    </style> 

    <script src="../js/jquery-1.5.2.min.js"></script> 

    </head> 

    <body> 
    <h1>Problem: adjust my jQuery code to get column B to filter on column A?</h1> 
    <div class="nav"> 
    <p>Column A<br>Filter by:</p> 
    <ul> 
    <li id="A">A</li> 
    <li id="red">red</li> 
    <li id="green">green</li> 
    <li id="large">large</li> 
    <li id="small">small</li> 
    <li id="B">B</li> 
    <li id="orange">orange</li> 
    </ul> 
    </div> 

    <div class="nav"> 
    <p>Column B<br>Then by:</p> 
    <ul> 
    <li id="A">A</li> 
    <li id="red">red</li> 
    <li id="green">green</li> 
    <li id="large">large</li> 
    <li id="small">small</li> 
    <li id="B">B</li> 
    <li id="orange">orange</li> 
    </ul> 
    </div> 

    <div class="item"> 
    <div class="small red A">A</div> 
    <div class="small green A">A</div> 
    <div class="small orange A">A</div> 
    <div class="small purple A">A</div> 
    <div class="small blue A">A</div> 
    <div class="medium red A">A</div> 
    <div class="medium green A">A</div> 
    <div class="medium orange A">A</div> 
    <div class="medium purple A">A</div> 
    <div class="medium blue A">A</div> 
    <div class="large red A">A</div> 
    <div class="large green A">A</div> 
    <div class="large orange A">A</div> 
    <div class="large purple A">A</div> 
    <div class="large blue A">A</div> 
    <div class="small red B">B</div> 
    <div class="small green B">B</div> 
    <div class="small orange B">B</div> 
    <div class="small purple B">B</div> 
    <div class="small blue B">B</div> 
    <div class="medium red B">B</div> 
    <div class="medium green B">B</div> 
    <div class="medium orange B">B</div> 
    <div class="medium purple B">B</div> 
    <div class="medium blue B">B</div> 
    <div class="large red B">B</div> 
    <div class="large green B">B</div> 
    <div class="large orange B">B</div> 
    <div class="large purple B">B</div> 
    <div class="large blue B">B</div> 
    <div class="small red C">C</div> 
    <div class="small green C">C</div> 
    <div class="small orange C">C</div> 
    <div class="small purple C">C</div> 
    <div class="small blue C">C</div> 
    <div class="medium red C">C</div> 
    <div class="medium green C">C</div> 
    <div class="medium orange C">C</div> 
    <div class="medium purple C">C</div> 
    <div class="medium blue C">C</div> 
    <div class="large red C">C</div> 
    <div class="large green C">C</div> 
    <div class="large orange C">C</div> 
    <div class="large purple C">C</div> 
    <div class="large blue C">C</div> 
    </div><!-- //end items --> 


     <script><!-- to show and hide overlays --> 
     $(document).ready(function(){ 
      $('li').click(function(){ 
       $('.item div').hide(); 
       $('.'+this.id).show('slow'); 
      }); 
     }); 
    </script> 


    </body> 
    </html>

來源

2013-01-02 user1910503

~~這 fiddle將工作~~

$('li').click(function() { var divs = $('item div:visible').add('.' + this.id + ':visible'); $('.item div').hide(); divs.show('slow'); });

我會建議使用閉包，在這個fiddle，所以你不需要重新選擇在每次div的單擊。除非它們是動態的。

$(document).ready(function() { var squares = $('.item div'); $('li').click(function() { var divs = $(':visible', squares).add('.' + this.id + ':visible'); squares.hide(); divs.show('slow'); }); });

％的OP的編輯：

這fiddle會工作。

$(document).ready(function() { 
    var squares = $('.item div'); 
    var filters = $('.nav').data('filter', null); 
    $('li').click(function(){ 
    $(this).closest('.nav').data('filter', '.' + this.id); 
    var f = filters.map(function(){ return $(this).data('filter'); }).toArray(); 
    squares.hide().filter(f.join('')).show('slow'); 
    }); 
});

注：代碼編寫的方式，你應該能夠添加n額外的過濾器。

來源

2013-01-02 22:04:27 Kyle

@ user1910503我編輯，以反映更改。 – Kyle

編輯對列B中的點擊很有效，但列A似乎沒有重置。我喜歡添加額外過濾器的能力 - 優雅！ – user1910503

在任何時候，您都可以應用兩個過濾器。在使用列A和B過濾後單擊列A會將A過濾器重置爲新點擊的過濾器，同時保持應用B過濾器。 – Kyle

http://jsfiddle.net/vaX5V/

我已經設置列A是第一個過濾器，然後列B.因此，如果您單擊A然後B，你會得到一個過濾器，然後在該子集另一個過濾器。

JAVASCRIPT

$(document).ready(function() { 
    $('li').click(function(e) { 
     console.log($(e.target).parents('div').attr('id')); 
     if($(e.target).parents('div').attr('id') == 'filter1'){ 
      $('.item div').hide(); 
      $('.' + this.id).show('slow'); 
     }else if($(e.target).parents('div').attr('id') == 'filter2'){ 
      console.log('.item div.' + this.id); 
      var keepShown = $('.item div.' + this.id); 
      $('.item div').not(keepShown).hide('slow');  
     } 

    }); 
});

我用keepShown變量來查找第二組（B欄），則隱藏任何真實所示在第二組NOT。

HTML

<body> 
<h1>Problem: adjust my jQuery code to get column B to filter on column A?</h1> 
<div class="nav" id="filter1"> 
<p>Column A<br>Filter by:</p> 
<ul> 
    <li id="A">A</li> 
    <li id="red">red</li> 
    <li id="green">green</li> 
    <li id="large">large</li> 
    <li id="small">small</li> 
    <li id="B">B</li> 
    <li id="orange">orange</li> 
</ul> 
</div> 

<div class="nav" id="filter2"> 
<p>Column B<br>Then by:</p> 
<ul> 
    <li id="A">A</li> 
    <li id="red">red</li> 
    <li id="green">green</li> 
    <li id="large">large</li> 
    <li id="small">small</li> 
    <li id="B">B</li> 
    <li id="orange">orange</li> 
</ul> 
</div> 

<div class="item"> 
    <div class="small red A">A</div> 
    <div class="small green A">A</div> 
    <div class="small orange A">A</div> 
    <div class="small purple A">A</div> 
    <div class="small blue A">A</div> 
    <div class="medium red A">A</div> 
    <div class="medium green A">A</div> 
    <div class="medium orange A">A</div> 
    <div class="medium purple A">A</div> 
    <div class="medium blue A">A</div> 
    <div class="large red A">A</div> 
    <div class="large green A">A</div> 
    <div class="large orange A">A</div> 
    <div class="large purple A">A</div> 
    <div class="large blue A">A</div> 
    <div class="small red B">B</div> 
    <div class="small green B">B</div> 
    <div class="small orange B">B</div> 
    <div class="small purple B">B</div> 
    <div class="small blue B">B</div> 
    <div class="medium red B">B</div> 
    <div class="medium green B">B</div> 
    <div class="medium orange B">B</div> 
    <div class="medium purple B">B</div> 
    <div class="medium blue B">B</div> 
    <div class="large red B">B</div> 
    <div class="large green B">B</div> 
    <div class="large orange B">B</div> 
    <div class="large purple B">B</div> 
    <div class="large blue B">B</div> 
    <div class="small red C">C</div> 
    <div class="small green C">C</div> 
    <div class="small orange C">C</div> 
    <div class="small purple C">C</div> 
    <div class="small blue C">C</div> 
    <div class="medium red C">C</div> 
    <div class="medium green C">C</div> 
    <div class="medium orange C">C</div> 
    <div class="medium purple C">C</div> 
    <div class="medium blue C">C</div> 
    <div class="large red C">C</div> 
    <div class="large green C">C</div> 
    <div class="large orange C">C</div> 
    <div class="large purple C">C</div> 
    <div class="large blue C">C</div> 
</div><!-- //end items -->  

</body>

來源

2013-01-02 22:19:10 zer0bit

謝謝你。我正在試驗它。似乎沒有讓我回到A列，但... – user1910503

如果您單擊列A，它應該重置選擇過程，然後您可以再次選擇列B. – zer0bit

所以它！我的錯。 – user1910503

如何使用jQuery按列B過濾列A

回答

相關問題