javascript - 使用 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