jQuery过滤器与复选框

Question

我有一个网格，我需要通过2个不同的属性过滤。位置,语言。

我已经为每个属性创建了一个检查元素数组，并且需要能够通过这些来过滤结果。

https://codepen.io/lee-grant/pen/bGWzRYJ?编辑= 1111

var filterActive;
function filterCategory(cat1, cat2) {
// Create an Array.
var location = new Array();
$('.location input[type=checkbox]:checked').each(function () {
location.push(this.value);
});
if (location.length > 0) {
console.log('Location values: ', location);
}
// Create an Array.
var language = new Array();
$('.language input[type=checkbox]:checked').each(function () {
language.push(this.value);
});
if (language.length > 0) {
console.log('Language values: ', language);
}
// reset results list
$('.team-member').removeClass('active');
// the filtering in action for all criteria
var selector = '.team-member';
if ($('.location input').is(':checked')) {
selector = '[data-location*="' + location + '"]';
}
if ($('.language input').is(':checked')) {
selector = selector + '[data-language*="' + language + '"]';
}
//show all results
$(selector).addClass('active');
}
// start by showing all items
$('.team-member').addClass('active');
// call the filtering function when selects are changed
$('.test :checkbox').change(function () {
filterCategory(
$('.location :checkbox:checked').val(),
$('.language :checkbox:checked').val()
);
});

在这个例子中，它一次只适用于1个位置和1种语言;有人能就如何让这个工作正确与多个选择提供建议吗?

谢谢

Answer 1

也许这样可以解决你的问题:

// 01 - get all location selected
// 02 - get all language selected
// 03 - filtering and show card by option selected

过滤代码

// 01 - get all location selected
let locationSelected = $('.location input[type=checkbox]:checked').map(function () {
return $(this).val()
}).get()
// 02 - get all language selected
let languageSelected = $('.language input[type=checkbox]:checked').map(function () {
return $(this).val()
}).get()

// filtering
$('.team-member').each(function(){
let $card = $(this)
let dataLocation = $(this).data('location');
let dataLanguage = $(this).data('language');

// show card by location selection
locationSelected.forEach(function(item, index){
if( dataLocation.indexOf(item) !== -1 ) {
$card.addClass('active');
}
})

// show card by language selection
languageSelected.forEach(function(item, index){
if( dataLanguage.indexOf(item) !== -1 ) {
$card.addClass('active');
}
})

})

demo jsfiddle: https://jsfiddle.net/ymxf5oz1/

Answer 2

一种方法是循环遍历每个数组值，并像这样添加它们:

if ($('.location input').is(':checked')) {
$.each(location, function(i, x) {
selector += '[data-location*="' + x + '"]';
})
}

(function($) {
'use strict';
var filterActive;
function filterCategory(cat1, cat2) {
// Create an Array.
var location = new Array();
$('.location input[type=checkbox]:checked').each(function() {
location.push(this.value);
});
// Create an Array.
var language = new Array();
$('.language input[type=checkbox]:checked').each(function() {
language.push(this.value);
});
// reset results list
$('.team-member').removeClass('active');
// the filtering in action for all criteria
var selector = '.team-member';
if ($('.location input').is(':checked')) {
$.each(location, function(i, x) {
selector += '[data-location*="' + x + '"]';
})
}
if ($('.language input').is(':checked')) {
$.each(language, function(i, x) {
selector += '[data-language*="' + x + '"]';
})
}
//show all results
$(selector).addClass('active');
}
// start by showing all items
$('.team-member').addClass('active');
// call the filtering function when selects are changed
$('.test :checkbox').change(function() {
filterCategory(
$('.location :checkbox:checked').val(),
$('.language :checkbox:checked').val()
);
});
})(jQuery);

.team-wrap {
margin: 0 -15px;
display: flex;
flex-wrap: wrap;
}
.team-wrap .team-member {
width: 25%;
padding: 15px;
opacity: 0;
display: none;
}
.team-wrap .team-member.active {
opacity: 1;
display: block;
}
.team-wrap .team-member header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #eeeeee;
}
.team-wrap .team-member header .view {
font-weight: 500;
color: #3d3253;
background-color: #fff;
border-radius: 30px 30px 30px 30px;
padding: 13px 25px 13px 25px;
position: absolute;
opacity: 0;
transform: translateY(50px);
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
}
.team-wrap .team-member header:hover .view {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
.team-wrap .team-member header .view:hover {
color: #fff;
background-color: #3d3253;
}
.team-wrap .team-member header img {
display: block;
width: 100%;
}
.team-wrap .team-member .content {
padding: 20px;
font-size: 14px;
background: #e7d8d3;
text-align: center;
}
.team-wrap .team-member .content h4 {
color: #3d3253;
margin: 0 0 10px 0;
font-size: 20px;
}
.team-wrap .team-member .content p {
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<ul class="location">
<li><strong>Location:</strong></li>
<li><input id="brighton" name="brighton" type="checkbox" value="brighton"><label>Brighton (1)</label></li>
<li><input id="covent-garden" name="covent-garden" type="checkbox" value="covent-garden"><label>Covent Garden (6)</label></li>
<li><input id="fitzrovia" name="fitzrovia" type="checkbox" value="fitzrovia"><label>Fitzrovia (8)</label></li>
<li><input id="oxford-circus" name="oxford-circus" type="checkbox" value="oxford-circus"><label>Oxford Circus (12)</label></li>
<li><input id="soho" name="soho" type="checkbox" value="soho"><label>Soho (6)</label></li>
</ul>
<ul class="language">
<li><strong>Language</strong></li>
<li><input id="croatian-serbian" name="croatian-serbian" type="checkbox" value="croatian-serbian"><label>Croatian/Serbian (2)</label></li>
<li><input id="english" name="english" type="checkbox" value="english"><label>English (21)</label></li>
<li><input id="greek" name="greek" type="checkbox" value="greek"><label>Greek (5)</label></li>
<li><input id="italian" name="italian" type="checkbox" value="italian"><label>Italian (13)</label></li>
<li><input id="mandarin" name="mandarin" type="checkbox" value="mandarin"><label>Mandarin (7)</label></li>
</ul>
</div>
<div class="team-wrap">
<article class="team-member" data-language="english italian" data-location="covent-garden">
<div class="content">
<p>Location: Covent Garden</p>
<p>Language: English, Italian</p>
</div>
</article>
<article class="team-member" data-language="croatian-serbian english" data-location="oxford-circus">
<div class="content">
<p>Location: Oxford Circus</p>
<p>Language: Croatian/Serbian, English</p>
</div>
</article>
<article class="team-member" data-language="italian" data-location="covent-garden">
<div class="content">
<p>Location: Covent Garden</p>
<p>Language: Italian</p>
</div>
</article>
<article class="team-member active" data-language="english mandarin" data-location="soho">
<div class="content">
<p>Location: Soho</p>
<p>Language: English, Mandarin</p>
</div>
</article>
<article class="team-member" data-language="english" data-location="fitzrovia">
<div class="content">
<p>Location: Fitzrovia</p>
<p>Language: English</p>
</div>
</article>
<article class="team-member" data-language="croatian-serbian greek" data-location="fitzrovia">
<div class="content">
<p>Location: Fitzrovia</p>
<p>Language: Croatian/Serbian, Greek</p>
</div>
</article>
<article class="team-member" data-language="english" data-location="fitzrovia">
<div class="content">
<p>Location: Fitzrovia</p>
<p>Language: English</p>
</div>
</article>
<article class="team-member" data-language="english" data-location="oxford-circus">
<div class="content">
<p>Location: Oxford Circus</p>
<p>Language: English</p>
</div>
</article>
<article class="team-member" data-language="english" data-location="oxford-circus">
<div class="content">
<p>Location: Oxford Circus</p>
<p>Language: English</p>
</div>
</article>
<article class="team-member" data-language="english" data-location="brighton covent-garden">
<div class="content">
<p>Location: Brighton, Covent Garden</p>
<p>Language: English</p>
</div>
</article>
</div>