J'ai quelque chose qui filtre les groupes de cartes sur une page et qui fonctionne bien, jusqu'à ce que j'essaie d'ajouter des en-têtes de section à chaque groupe. Idéalement, j'aimerais que tous les en-têtes de section disparaissent lorsque mon bloc "pas de résultats" est affiché.
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on("change", function () {
$(".card-grid").show();
var selectedFilters = {};
$filterCheckboxes.filter(":checked").each(function () {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $(".card");
$.each(selectedFilters, function (name, filterValues) {
$filteredResults = $filteredResults.filter(function () {
var matched = false,
currentFilterValues = $(this).data("category").split(" ");
$.each(currentFilterValues, function (_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$(".card").hide().filter($filteredResults).show();
var all_hidden = true;
$(".card").each(function (index) {
if ($(this).is(":visible")) {
all_hidden = false;
document.getElementsByClassName("no-results")[0].style.display = "none";
document.getElementsByClassName("section-header")[0].style.display =
"block";
}
});
if (all_hidden) {
$(".card-grid").hide();
document.getElementsByClassName("no-results")[0].style.display = "block";
document.getElementsByClassName("section-header")[0].style.display = "none";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<ul class="filters">
<li><input type="checkbox" name="topic" id="topic1" value="topic1"><label for="topic1">Topic 1
</li>
<li><input type="checkbox" name="topic" id="topic2" value="topic2"><label for="topic2">Topic 2</li>
<li><input type="checkbox" name="topic" id="topic3" value="topic3"><label for="topic3">Topic 3
</li>
</ul>
</div>
<div class="filter-section-content">
<div class="filter-container">
<ul class="filters">
<li><input type="checkbox" name="content-type" id="subfilter1" value="reads"><label for="subfilter1">subfilter1</label></li>
<li><input type="checkbox" name="content-type" id="subfilter2" value="linkedin"><label for="subfilter2">subfilter2</label></li>
<li><input type="checkbox" name="content-type" id="subfilter3" value="subfilter3"><label for="subfilter3">subfilter3</label>
</li>
</ul>
</div>
</div>
<p> </p>
<!--Cards-->
<!--Topic 1-->
<p class="section-header">Topic 1</p>
<div class="card-grid">
<!--New Card-->
<div class="card" data-category="topic1 subfilter1">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 1</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body">
</div>
</div>
</div>
<!--New Card-->
<div class="card" data-category="topic1 subfilter3">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 1</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body">
</div>
</div>
</div>
</div>
<!--Topic 2-->
<p class="section-header">Topic 2</p>
<div class="card-grid">
<!--New Card-->
<div class="card" data-category="topic2 subfilter1">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 2</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body"></div>
</div>
</div>
</div>
<div class="no-results">
No Results
</div>Je sais que la [0] après la ligne qui récupère le nom de la classe pour les en-têtes de section ne récupère que le premier, mais quand je l'enlève, j'obtiens une erreur "style is undefined". Ne devrait-il pas récupérer tous les éléments ayant le nom de classe spécifié ?
