如何使用jquery过滤swiper轮播？

Question

我有如下代码，我想根据所选的选择选项进行过滤，但我无法在屏幕上显示所选的数据。 我使用 Umbraco 技术，我需要过滤 swiper 元素 你能帮我解决这个问题吗

            <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>
        </div>


<script>
    $(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();
        }
    });
</script>

companyTitleElement.show();

和

companyTitleElement.hide();

我尝试过，但在屏幕上看不到过滤结果

Answer 1

有两种方法，一种是通过您的 Swiper API 传递过滤后的数据，另一种是销毁整个 Swiper 对象并在“filterList”方法中创建两次。