如何在现有Bootstrap表格架构下实现单按钮关联多分类筛选功能

Hey Dave, no need to apologize—your question is clear and totally makes sense for optimizing your community center's activity calendar! Let's get this multi-category filtering working with your existing code structure.

The Core Issue #

Your current JavaScript only handles a single category per button click. To implement your desired association rules, we'll add a mapping of each main category to its related categories, then update the click handler to show all matching items.

Step-by-Step Fix #

First, replace your existing click handler script (the one inside if (get_queried_object_id() == 64904):) with this updated code:

$(document).ready(function() {
    // Define your category association rules here
    // Match the exact values from your data-sort and data-doelgroep attributes
    const categoryMappings = {
        'Iedereen': ['Iedereen'],
        'Peuters': ['Peuters', 'Iedereen'],
        'Kinderen': ['Kinderen', 'Iedereen', 'Bsv-jeugd', 'Bso'],
        'Meiden': ['Meiden', 'Iedereen', 'Bsv-jeugd'],
        'Tieners': ['Tieners', 'Iedereen', 'Bsv-jeugd'],
        'Volwassenen': ['Volwassenen', 'Iedereen', 'Bsv-mannen', 'Bsv-vrouwen'],
        'Bsv-jeugd': ['Bsv-jeugd'],
        'Bsv-vrouwen': ['Bsv-vrouwen'],
        'Bsv-mannen': ['Bsv-mannen'],
        'Bso': ['Bso']
    };

    $(".sort-option").click(function(e) {
        e.preventDefault();
        const selectedCategory = $(this).data('sort');
        const categoriesToShow = categoryMappings[selectedCategory] || [];

        // Hide all activity items first
        $(".doelgroep-sort").addClass('d-none');

        // Special case: Show everything for Iedereen
        if (selectedCategory === 'Iedereen') {
            $(".doelgroep-sort").removeClass('d-none');
            return;
        }

        // Show each category in the mapped association list
        categoriesToShow.forEach(category => {
            $(`.doelgroep-sort[data-doelgroep="${category}"]`).removeClass('d-none');
        });
    });
});

Key Changes Explained #

• Category Mapping Object: categoryMappings directly translates your desired rules into a code-friendly structure. We used exact matches for your data-sort and data-doelgroep values to avoid mismatches.
• Multi-Category Display: Instead of targeting one category at a time, the script now loops through all related categories and shows their corresponding activity items.
• No HTML Overhaul: You don't need to modify your existing button data-sort attributes—all logic lives in the JavaScript, making it easy to update rules later.

Handling URL Parameters (Optional) #

If you want the selectie URL parameter to support your multi-category rules too, update that script to use the same mapping:

<?php if (isset($_GET['selectie'])): ?>
<script>
$(document).ready(function() {
    const categoryMappings = {
        'Iedereen': ['Iedereen'],
        'Peuters': ['Peuters', 'Iedereen'],
        'Kinderen': ['Kinderen', 'Iedereen', 'Bsv-jeugd', 'Bso'],
        'Meiden': ['Meiden', 'Iedereen', 'Bsv-jeugd'],
        'Tieners': ['Tieners', 'Iedereen', 'Bsv-jeugd'],
        'Volwassenen': ['Volwassenen', 'Iedereen', 'Bsv-mannen', 'Bsv-vrouwen'],
        'Bsv-jeugd': ['Bsv-jeugd'],
        'Bsv-vrouwen': ['Bsv-vrouwen'],
        'Bsv-mannen': ['Bsv-mannen'],
        'Bso': ['Bso']
    };

    const selectie = location.search.split('selectie=')[1];
    const categoriesToShow = categoryMappings[selectie] || [];

    $(".doelgroep-sort").addClass('d-none');

    if (selectie === 'Iedereen') {
        $(".doelgroep-sort").removeClass('d-none');
        return;
    }

    categoriesToShow.forEach(category => {
        $(`.doelgroep-sort[data-doelgroep="${category}"]`).removeClass('d-none');
    });
});
</script>
<?php endif ?>

Now, when someone visits a URL like /activiteiten?selectie=Peuters, the page will automatically show both Peuters and Iedereen activities.

内容的提问来源于stack exchange，提问作者Dave van Toer