使用jQuery操作和过滤多个html数据属性

Question

你好 stackoverflow 用户，

我想创建一个工作列表，该列表将按 4 个标准进行过滤，当用户应用其中一个标准时，我希望我的列表被 jQuery live 过滤，并且列表更新并显示正确的结果。

看看我的代码：

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

迭代容器数据。如果任何过滤器不匹配，则将标志设置为 false

$('.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