如何简化使用包含数组循环索引的 ids 和类名的 jQuery 代码

Question

我有一大块有效的 jQuery 代码（如下所示），但它非常重复。如何让它变得更简单？

    $('.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');
    } );

我尝试在 jQuery 中执行 for 循环，但它完全没有按照我预期的方式工作。

Answer 1

您可以使用这样的辅助函数：

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

或者您可以在 for 循环或 forEach 中使用

updateDisplay

，而不是一次一个。我更喜欢每个：

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.
    });
});