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

Question

Whosebug 用户您好，

我想创建一个将按 4 个标准过滤的工作列表，当用户应用其中一个标准时，我希望我的列表按 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');

}

});

}

所以我想要的是，当用户 select 之前的过滤国家/地区已经 select 过滤行业发生变化时，以保留过滤行业并刷新具有相同行业和工作的列表国家

对不起我的英语，

希望能找到解决办法

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 数据属性

Using jQuery to manipulate and filter multiple html data attributes

javascript

jquery

filtering

arraylist

jquery-filter