How to simplify jQuery code that uses ids and class names that include array loop indexes

Question

I have a chunk of working jQuery code (seen below) but it's very repetitive. How do I make it more simplified?

    $('.card-loop2').addClass('d-none').removeClass('d-flex');
    $('.card-loop3').addClass('d-none').removeClass('d-flex');
    $('.card-loop4').addClass('d-none').removeClass('d-flex');



    $('#newsUpdateLink').on( "click", function() {
        $('.category-loop1.card-loop1').addClass('d-flex').removeClass('d-none');
        $('.category-loop2.card-loop1').addClass('d-flex').removeClass('d-none');
        $('.category-loop3.card-loop1').addClass('d-flex').removeClass('d-none');
        $('.category-loop4.card-loop1').addClass('d-flex').removeClass('d-none');

        $('.card-loop2').addClass('d-none').removeClass('d-flex');
        $('.card-loop3').addClass('d-none').removeClass('d-flex');
        $('.card-loop4').addClass('d-none').removeClass('d-flex');
    } );

    $('#categoryLink1').on( "click", function() {
        $('.category-loop1.card-loop1').addClass('d-flex').removeClass('d-none');
        $('.category-loop1.card-loop2').addClass('d-flex').removeClass('d-none');
        $('.category-loop1.card-loop3').addClass('d-flex').removeClass('d-none');
        $('.category-loop1.card-loop4').addClass('d-flex').removeClass('d-none');

        $('.category-loop2').addClass('d-none').removeClass('d-flex');
        $('.category-loop3').addClass('d-none').removeClass('d-flex');
        $('.category-loop4').addClass('d-none').removeClass('d-flex');
    } );

    $('#categoryLink2').on( "click", function() {
        $('.category-loop2.card-loop1').addClass('d-flex').removeClass('d-none');
        $('.category-loop2.card-loop2').addClass('d-flex').removeClass('d-none');
        $('.category-loop2.card-loop3').addClass('d-flex').removeClass('d-none');
        $('.category-loop2.card-loop4').addClass('d-flex').removeClass('d-none');

        $('.category-loop1').addClass('d-none').removeClass('d-flex');
        $('.category-loop3').addClass('d-none').removeClass('d-flex');
        $('.category-loop4').addClass('d-none').removeClass('d-flex');
    } );

    $('#categoryLink3').on( "click", function() {
        $('.category-loop3.card-loop1').addClass('d-flex').removeClass('d-none');
        $('.category-loop3.card-loop2').addClass('d-flex').removeClass('d-none');
        $('.category-loop3.card-loop3').addClass('d-flex').removeClass('d-none');
        $('.category-loop3.card-loop4').addClass('d-flex').removeClass('d-none');

        $('.category-loop1').addClass('d-none').removeClass('d-flex');
        $('.category-loop2').addClass('d-none').removeClass('d-flex');
        $('.category-loop4').addClass('d-none').removeClass('d-flex');
    } );

    $('#categoryLink4').on( "click", function() {
        $('.category-loop4.card-loop1').addClass('d-flex').removeClass('d-none');
        $('.category-loop4.card-loop2').addClass('d-flex').removeClass('d-none');
        $('.category-loop4.card-loop3').addClass('d-flex').removeClass('d-none');
        $('.category-loop4.card-loop4').addClass('d-flex').removeClass('d-none');

        $('.category-loop1').addClass('d-none').removeClass('d-flex');
        $('.category-loop2').addClass('d-none').removeClass('d-flex');
        $('.category-loop3').addClass('d-none').removeClass('d-flex');
    } );

I've tried to do a for loop in jQuery but it did not work at all the way I was expecting.

Answer 1

You could just use a helper function like this:

function updateDisplay(categorySelector, cardSelector) {
    $(categorySelector).addClass('d-flex').removeClass('d-none');
    $(cardSelector).addClass('d-none').removeClass('d-flex');
}

$('#categoryLink1').on("click", function () {
    updateDisplay('.category-loop1.card-loop1, .category-loop1.card-loop2, .category-loop1.card-loop3, .category-loop1.card-loop4', '.category-loop2, .category-loop3, .category-loop4');
});

// ... Add the rest

Or instead of one at a time, you could use updateDisplay in a for loop or a forEach. I prefer forEach:

const links = ['#categoryLink1', '#categoryLink2', '#categoryLink3', '#categoryLink4'];

// Attach event handlers to category links
links.forEach(function (link, index) {
    $(link).on("click", function () {
        // use updateDisplay() with some index logic in here.
    });
});