Question

Hello 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 JOB LIST

<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

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

1 个答案: