如何解决jQuery筛选Umbraco中Swiper轮播图无显示效果问题？

使用Umbraco开发时，通过下拉选择框筛选Swiper轮播图内容，但筛选后无法正确显示匹配的数据。尝试用companyTitleElement.show()和companyTitleElement.hide()方法无效果，相关代码如下：

HTML代码 #

<div class="d-flex justify-content-end gap-lg-4 mb-lg-3">
    <select class="form-select" aria-label="Şirket Seç">
        @{
            var uniqueCompanyTitles = allCertificates
                .Where(c => !string.IsNullOrWhiteSpace(c?.CompanyTitle))
                .Select(c => c.CompanyTitle)
                .Distinct()
                .ToList();
            <option value="Tümü">Tümü</option>
            foreach (var companyTitle in uniqueCompanyTitles)
            {
                <option value="@companyTitle">@companyTitle</option>
            }
        }
    </select>
</div>
<div class="swiper cer-swiper ps-3">
    <div class="swiper-wrapper">
        @if (allCertificates.Count() != 0)
        {
            @for (var i = 0; i < allCertificates?.Count(); i += 3)
            {
                <div class="swiper-slide certificate-swiper d-flex flex-column gap-3">
                    @for (var j = i; j < i + 3 && j < allCertificates?.Count(); j++)
                    {
                        <div class="d-flex flex-row">
                                <div class="d-none cer-company-title">@allCertificates?.ElementAt(j)?.CompanyTitle</div>
                          
                        </div>
                    }
                </div>
            }
        }
    </div>
</div>

JavaScript代码 #

$(document).ready(function () {
    var swiper = new Swiper(".cer-swiper", {
        slidesPerView: 1,
        spaceBetween: 120,
        loop: false,
        breakpoints: {
            992: {
                slidesPerView: 2,
                spaceBetween: 20,
            }
        }
    });

    $(".form-select[aria-label='Şirket Seç']").on("change", function () {
        var selectedCompany = $(this).val().toLowerCase();
        console.log('selectedCompany:',selectedCompany)
        filterList(selectedCompany);
    });
   
    function filterList(value) {
        var slides = swiper.slides;
        for (var i = 0; i < slides.length; i++) {
            var slide = slides?.[i];
            console.log("slide:",slide)
            var companyTitleElement = $(slide).find('.cer-company-title');
            var companyTitle = $(slide).find('.cer-company-title').text().toLowerCase().trim();
            console.log('value: ',value)
            console.log('companyTitle: ',companyTitle)
            console.log("$(slide).find('.cer-company-title')", $(slide).find('.cer-company-title'))
            if (value === 'tümü' || companyTitle === value) {
                companyTitleElement.show();
            } else {
                 companyTitleElement.hide();
            }
        }
            swiper.updateSize();
            swiper.updateSlides();
            swiper.updateProgress();
            swiper.updateSlidesClasses();
            swiper.slideTo(0);
            swiper.scrollbar.updateSize();
    }
});

解决方案 #

1. 核心问题分析

• 你操作的是默认隐藏的.cer-company-title元素，而非轮播的slide或证书项本身，所以show/hide不会影响页面显示。
• 每个slide包含多个不同公司的证书，当前逻辑只判断slide内第一个公司标题，筛选逻辑完全错误。

2. 具体修正步骤

调整DOM结构，给证书项添加标识

给每个证书容器添加类名和data-company属性，用于快速匹配公司名称：

<div class="swiper cer-swiper ps-3">
    <div class="swiper-wrapper">
        @if (allCertificates.Count() != 0)
        {
            @for (var i = 0; i < allCertificates?.Count(); i += 3)
            {
                <div class="swiper-slide certificate-swiper d-flex flex-column gap-3">
                    @for (var j = i; j < i + 3 && j < allCertificates?.Count(); j++)
                    {
                        <!-- 添加cert-item类和data-company属性 -->
                        <div class="d-flex flex-row cert-item" data-company="@allCertificates.ElementAt(j).CompanyTitle.ToLower().Trim()">
                            <!-- 这里保留你的证书内容（图片、文字等） -->
                            <div class="d-none cer-company-title">@allCertificates.ElementAt(j).CompanyTitle</div>
                        </div>
                    }
                </div>
            }
        }
    </div>
</div>

修改筛选逻辑，控制证书和slide的显示

修改JS的filterList函数，先控制每个证书项的显示/隐藏，再根据slide内是否有可见证书决定是否隐藏slide，最后更新Swiper状态：

function filterList(value) {
    var slides = swiper.slides;
    slides.each(function() {
        var $slide = $(this);
        var $certItems = $slide.find('.cert-item');
        var hasVisibleCert = false;

        // 遍历当前slide下的所有证书项
        $certItems.each(function() {
            var itemCompany = $(this).data('company');
            if (value === 'tümü' || itemCompany === value) {
                $(this).show();
                hasVisibleCert = true;
            } else {
                $(this).hide();
            }
        });

        // 如果slide内没有可见证书，隐藏整个slide
        $slide.toggle(hasVisibleCert);
    });

    // 统一更新Swiper状态，替代多个单独的update方法
    swiper.update();
    swiper.slideTo(0);
}

优化下拉选项匹配

确保下拉选项的value格式和data-company一致，避免大小写或空格导致匹配失败：

<option value="@companyTitle.ToLower().Trim()">@companyTitle</option>

3. 额外优化建议

• 可以去掉.cer-company-title元素，直接用data-company存储公司名称，减少DOM元素。
• 若不需要显示空slide，上述逻辑已经处理了slide的隐藏，不会出现空白轮播项。

内容的提问来源于stack exchange，提问作者Alperen Kapusuz