diff --git a/js/filter.js b/js/filter.js index f5835e8..93257c6 100644 --- a/js/filter.js +++ b/js/filter.js @@ -1,4 +1,3 @@ - function initFilter() { const filterSelect = document.getElementById('category-filter'); const listContainer = document.querySelector('.s-res-list'); @@ -6,22 +5,29 @@ function initFilter() { if (!filterSelect || !listContainer) return; filterSelect.addEventListener('change', function() { - const selectedCategory = this.value.toLowerCase(); + const selectedCategory = this.value.toLowerCase().trim(); const cards = listContainer.querySelectorAll('.s-res-item'); + console.log("--- FILTER GESTARTET ---"); + console.log("Ausgewählt im Dropdown (kleingeschrieben): '" + selectedCategory + "'"); + cards.forEach(card => { - const cardCategory = card.getAttribute('data-category') || ''; + const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim(); + const articleTitle = card.querySelector('.s-res-link')?.textContent.trim() || 'Unbekannt'; + + console.log(`Prüfe Artikel "${articleTitle}": Karte hat '${cardCategory}' vs Dropdown '${selectedCategory}'`); if (selectedCategory === 'all' || cardCategory === selectedCategory) { - card.style.display = 'flex'; + card.style.style.display = 'flex'; + console.log("-> TREFFER (wird angezeigt)"); } else { card.style.display = 'none'; + console.log("-> KEIN TREFFER (wird ausgeblendet)"); } }); }); } -// ist das DOM bereits vollständig aufgebaut? if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initFilter); } else {