私は私をしたいと思い、それらのcriteriasの一つは、ユーザによって適用されたとき、私は、4つのcriteriasによってフィルタリングれますジョブリストを作成したいと考え、複数のHTMLデータが

Question

こんにちはstackoverflowのユーザー属性操作し、フィルタリングする

をjQueryのを使用してjQueryライブによってフィルタリングされるリストと、正しい結果を更新して表示するリスト。

は、私のコードのを見てみましょう：

A）HTMLフィルタ

<select id="country"> 

<option>Italy</option> 

<option>France</option> 

.... 

</select> 

<select id="industry"> 

<option>Finance</option> 

<option>Internet</option> 

.... 

</select> 

<select id="remote"> 

<option>Yes</option> 

<option>No</option> 

.... 

</select> 

<select id="sponsor-visas"> 

<option>Yes</option> 

<option>No</option> 

.... 

</select> 

B）HTMLのジョブリストを

<div class="job-container" data-country="Italy" data-industry="Finance" data-remote="Yes" data-sponsor-visa="No"> 

//Here the content of a job eg: Images, Title and etc. 

</div> 

<div class="job-container" data-country="France" data-industry="Internet" data-remote="No" data-sponsor-visa="Yes"> 

//Here the content of a job eg: Images, Title and etc. 

</div> 

<div class="job-container" data-country="Spain" data-industry="Finance" data-remote="Yes" data-sponsor-visa="No"> 

//Here the content of a job eg: Images, Title and etc. 

</div> 

and goes on.... 

C）jQueryの

var filters = []; 

$('#industry').on('change', function(){ 

var value = $(this).val(); 

filters['industry'] = value; 

filteredResults(); 

}); 

$('#country').on('change', function(){ 

var value = $(this).val(); 

filters['country'] = value; 

filteredResults(); 

}); 

$('#remote').on('change', function(){ 

var value = $(this).val(); 

filters['remote'] = value; 

filteredResults(); 

}); 

$('#sponsor-visas').on('change', function(){ 

var value = $(this).val(); 

filters['visa'] = value; 

filteredResults(); 

}); 

function filteredResults() { 

$('.job-container').each(function(){ 

var industry = $(this).attr('data-industry'); 
var remote = $(this).attr('data-remote'); 
var visa = $(this).attr('data-visa'); 
var country = $(this).attr('data-country'); 

if (filters['industry'] == industry) { // HERE I WOULD LIKE TO DO THE SAME WITH ALL FILTERS 

$(this).fadeIn('fast'); 

} 
else { 

$(this).fadeOut('fast'); 

} 

}); 

} 

だから何私が望むのは、ユーザーが選択したときです前によるフィルタの国は、すでに私は解決策

を見つけることを願って、フィルタ業界を保持し、同じ業界と国

私の英語のため申し訳ありません

を持って仕事にリストを更新するために変化に

をフィルタ業界を選択しています

Answer 1

コンテナデータを反復処理します。フィルタのいずれかが上記の偽

$('.job-container').each(function(){ 
    var isMatch = true, // true until a mismatch is found 
     $cont = $(this), 
     container_data = $cont.data(); 

    $.each(container_data, function(key, value){ 
     // check if that filter has a value and if it doesn't match 
     if(filters[key] && filters[key] !== value){ 
      isMatch = false; 
      return false;// break each loop, no need to continue checking 
     } 
    }); 

    $cont[ isMatch ? 'fadeIn' :'fadeOut' ]('fast'); 

}); 

に設定されたフラグと一致しない場合は何も選択が特定のフィルタのために作られていない場合、アイテムは

DEMO

を含めるべきであることを前提としてい