Question

在我的Asp.net MVC应用程序中，我使用Jquery并过滤产品列表。它与80-90个元素的产品列表完美配合。但是当有大量产品清单（250-300产品）时，页面高度就会出现问题。

例如，当没有应用过滤器时，有250个可见产品，页面高度非常高。通常，当我点击过滤按钮时，可见产品数量大约为30，但页面高度没有正确变化，并且在页面底部有一个巨大的空白区域。

我尝试了几个版本的JQuery，没有＆＃39;改变一切。

我不知道这是JQuery的错误还是我做错了什么？

这是我的代码。

<script src=".../jquery-3.2.1.js"></script>
<script src=".../jquery.filterizr.min.js"></script>
<script src=".../products3.js"></script>

以下是product3.js的内容：

$(document).ready(function () {

$('.filter-button').click(function () {
    $('.filter-div .filter-button').removeClass('active');
    $(this).addClass('active');
});

var filterizd = $('.filtr-container').filterizr({
    //options object
    delay: .1,
    filterOutCss: {
        opacity: 0,
        transform: 'scale(0.3)'
    },
    filterInCss: {
        opacity: 1,
        transform: 'scaleX(1)'
    }
});
});

在html方面，我获得了产品系列列表并创建了过滤器按钮：

<div class="bg-secondary-light p-2 mb-3 filter-div row m-0">
<div class="col-md-2">
    <h5 class="text-uppercase m-0" style="font-family:'Bebas Neue';font-size:30px;line-height:30px;margin-top:8px !important;">@GeneralHelper.ReturnRelatedCaption("leftmenu", "what-is-new") </h5>
</div>
<div class="col-md-10 mt-2">
    @{
        var refStr = GeneralHelper.ReturnRelatedCaption("keywords", "refKeyWord");
        var newIndicator = GeneralHelper.ReturnRelatedCaption("keywords", "new");
        var promoIndicator = GeneralHelper.ReturnRelatedCaption("keywords", "promo");

        var all = GeneralHelper.ReturnRelatedCaption("keywords", "all") + " (" + lstProducts.Count() + ")";

        <button id="btn-all-filter" class="btn-outline-default-second mb-1 active text-uppercase filter-button" data-filter="all">@all</button>

        List<int> lstFamilyIDs = lstProducts.Select(ro => ro.FamilyId.Value).Distinct().ToList();
        List<abwebfamille> subFamilies = ProductHelper.GetRelatedFamilies(lstFamilyIDs);

        foreach (var item in subFamilies)
        {
            <button class="btn-outline-default-second mb-1 text-uppercase filter-button" data-filter="@item.CodeFamWeb">

                @item.Designation

                <span>(@lstProducts.Where(ro => ro.FamilyId == item.CodeFamWeb).Count())</span>
            </button>
        }
    }
</div>

我得到了产品清单并创建了产品div：

<div class="row m-0">
<div class="col-md-2 d-none-only-sm p-0 pr-2">
    <a href="#">
        <img src="/CapronWebSite/Resources/Image/SiteImages/PubOrthesis.jpg" class="img-fluid w-100" alt="Sample Text">
    </a>
</div>

<div class="col-md-10 p-0">
    <div class="row m-0 filtr-container" id="divFamilyProducts">
        @foreach (var product in lstProducts)
        {
            <div class="col-lg-3 col-md-3 col-sm-6 filtr-item materialItem popupProduct" data-category="@product.FamilyId" data-toggle="modal">
                <div class="ih-item square effect6 bottom_to_top mt-5 border-secondary-1">
                    <a href="javascript:void(0);">
                        <div class="img">
                            <img src="@(string.Format(@"{0}/{1}.jpg", GeneralHelper.PhotoRootPath, product.PhotoPath))" class="img-fluid" alt="img">
                        </div>
                    </a>
                </div>
                <div class="d-flex flex-column mt-3">
                    <a href="javascript:void(0);" class="text-decoration-none text-center">
                        <small class="text-uppercase text-dark font-weight-bold dataName" data-name="@product.Name">@product.ShortName</small>
                    </a>
                    <small class="font-italic text-secondary dataRef text-center" data-ref="@product.RefNo">Réf. @product.RefNo</small>
                </div>
            </div>
        }
    </div>
</div>

JQuery Filterizr无法正常使用大型列表

0 个答案: