As shown below, I tried to make a script to filter posts based on different checkboxes' values but I ended up having untargeted posts.
The problem I'm having is located in the match() method (I guess). I tried using the '&&' operator but that couldn't help.
I want to have posts based on the checkboxes I checked.
Thanks in advance!
Link: https://codepen.io/resourceful_geek/pen/JjvWLEj
var $filterCheckboxes = $('.filter-container input[type=checkbox]');
var posts = ".post";
$filterCheckboxes.on("change keyup", function() {
//var filteredCheckboxesSample = ['translation', 'proofreading', 'intermediate', 'expert', '1'];
//var textStringSample = filteredCheckboxes.toString();
var selectedFilters = {};
var textString = "";
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty('filter')) {
selectedFilters['filter'] = [];
}
selectedFilters['filter'].push(this.value);
textString = selectedFilters['filter'].toString();
})
$(posts).hide().filter(function() {
var rtnData = "";
regExAll = new RegExp(textString.split(",").map(x => x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join('|'), 'i');
rtnData = (
$(this).attr("data-category").match(regExAll) || $(this).attr("data-level").match(regExAll)
);
return rtnData;
}).show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Filtered Posts</h1>
<div class="post-container">
<div class="post" data-id="1" data-job="translator" data-name="John" data-date="2021" data-level="beginner" data-price="20" data-rate="1" data-verified="1" data-category="translation">Translation | Beginner</div>
<div class="post" data-id="2" data-job="proofreader" data-name="Peter" data-date="2021" data-level="expert" data-price="20" data-rate="5" data-verified="1" data-category="proofreading">proofreading | expert</div>
<div class="post" data-id="3" data-job="translator" data-name="Steve" data-date="2021" data-level="intermediate" data-price="20" data-rate="1" data-verified="1" data-category="translation">Translation | intermediate</div>
<div class="post" data-id="4" data-job="content_crafting" data-name="Bil" data-date="2021" data-level="beginner" data-price="20" data-rate="2" data-verified="0" data-category="content_crafting">content_crafting | Beginner</div>
<div class="post" data-id="5" data-job="translator" data-name="Noah" data-date="2021" data-level="intermediate" data-price="20" data-rate="1" data-verified="0" data-category="translation">Translation | intermediate</div>
</div>
<h1>Filtering Area</h1>
<div class="filter-container">
<p>Filter by Category</p>
<div>
<input class="translation" type="checkbox" id="translation" name="service_categories" value="translation"></label>
<label for="translation">translation
</div>
<div>
<input class="proofreading" type="checkbox" id="proofreading" name="service_categories" value="proofreading"></label>
<label for="proofreading">proofreading
</div>
<div>
<input class="content_crafting" type="checkbox" id="content_crafting" name="service_categories" value="content_crafting"></label>
<label for="content_crafting">content_crafting
</div>
<p>Filter by Level</p>
<div>
<input class="beginner" type="checkbox" id="beginner" name="service_categories" value="beginner"></label>
<label for="beginner">beginner
</div>
<div>
<input class="intermediate" type="checkbox" id="intermediate" name="service_categories" value="intermediate"></label>
<label for="intermediate">intermediate
</div>
<div>
<input class="expert" type="checkbox" id="expert" name="service_categories" value="expert"></label>
<label for="expert">expert
</div>
</div>