JQuery filter based on radio input type - issue when nested within drop down

Question

I have a number of filters which update a list of cards on a page.

As the filter options have grown, I have now moved these into a drop down list for better UX. I am now running into an issue where the data (cards) no longer recognises the filters selected, and will not filter as a result. The filter data target remains the same. For example, when selecting "closed" only the data with status-closed should display.

$(document).ready(function() {

    // Existing - Display cards based on filter select:
    $('.filter-data').on('change', 'input[type=radio]', function() {
        var filtername = $(this).attr('name');
        var filtervalue = $(this).val();
        $('.cards').attr('data-' + filtername + '-match', filtervalue);
        $('.cards').attr('data-visible-count', $('.cards .card:visible').length);
    });

    // NEW - Change the button text & add active class:
    $('.input-select').change(function() {
        var dropdown = $(this).closest('.dropdown');
        var thislabel = $(this).closest('label');

        dropdown.find('label').removeClass('active');
        if ($(this).is(':checked')) {
            thislabel.addClass('active');
            dropdown.find('ins').html(thislabel.text());
        }
    });

    // New - Add tabindex on labels:
    $('label.dropdown-item').each(function(index, value) {
        $(this).attr('tabindex', 0);
        $(this).find('input').attr('tabindex', -1);
    });

    // New - Add keyboard navigation:
    $('label.dropdown-item').keypress(function(e) {
        if ((e.keyCode ? e.keyCode : e.which) == 13) {
            $(this).trigger('click');
        }
    });
});

Drop down filter structure:

<div class="dropdown">
    <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"> <ins>Filter</ins> </button>
    <div class="dropdown-menu radio filter-data">
        <label class="dropdown-item" for="status_all">
            <input type="radio" class="input-select" value="all" name="status" id="status_all">
            <div>All</div>
        </label>
        <label class="dropdown-item" for="open">
            <input type="radio" class="input-select" value="open" name="status" id="status_open">
            <div>Open</div>
        </label>
        <label class="dropdown-item" for="closed">
            <input type="radio" class="input-select" value="closed" name="status" id="status_closed">
            <div>Closed</div>
        </label>
    </div>
</div>

With a simplified version of the card layout - which I am trying to apply the filters to:

<div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="open">
    <div class="card">
        <div>Testing content</div>
    </div>
</div>
<div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="closed">
    <div class="card">
        <div>Testing content</div>
    </div>
</div>

With the filter-data class, the use of 'this' in the jQuery being used in the correct context? Or does this now target incorrectly?

Answer 1

If you want to hide/show the cards

replace this:

        $('.cards').attr('data-' + filtername + '-match', filtervalue);
        $('.cards').attr('data-visible-count', $('.cards .card:visible').length);

with this:

        $('.card-wrapper').hide();
        $('.card-wrapper [data-' + filtername + '="' + filtervalue + '"]').show();

Answer 2

Resolved my issue. Turns out that I was using jQuery closest(); incorrectly and also with the active class.

Restructured to pick up the correct elements.

Thank you to those who provided assistance with this.

$(document).ready(function() {
        
//EXISTING:
        $('.filters').on('change', 'input[type=radio]', function() {
            var filtername = $(this).attr('name');
            var filtervalue = $(this).val();
            $('.cards').attr('data-' + filtername + '-match', filtervalue );
            $('.cards').attr('data-visible-count', $('.cards .card:visible').length );
        });
        
          // NEW - Change the button text & add active class:
        $('.input-select').change(function() {
            var dropdown = $(this).closest('.dropdown');
            var thislabel = $(this).closest('label');
            dropdown.find('inst').html(thislabel.text());
            console.log(dropdown);
            console.log(thislabel);
        });  
    
        // NEW - Add tabindex on labels:
        $('label.dropdown-item').each(function(index, value) {
            $(this).attr('tabindex', 0);
            $(this).find('input').attr('tabindex', -1);
        });

        // NEW - Add keyboard navigation:
        $('label.dropdown-item').keypress(function(e) {
            if ((e.keyCode ? e.keyCode : e.which) == 13) {
                $(this).trigger('click');
            }
        });
    });