javascript - ASP.NET Core MVC 在产品页面详细信息上应用同位素过滤器

Question

我在我的 .Net 核心项目上动态应用了同位素过滤器。我成功地做到了，但发生了一个小错误。在选择产品的特定类别位置后不排在第一位。下面看我的两张图片

所有产品

过滤后检查该图像的位置没有改变（它需要先出现）

我在 Index.cshtml 下面的代码

@model BornoMala.Models.ViewModels.ProductDetailsVM
<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="row" data-aos="fade-up">
            <div class="col-lg-12 d-flex justify-content-center">
                <ul id="portfolio-flters">
                    <li data-filter="all" class="filter-active filter-button">All</li>
                    @foreach (var obj in Model.Categories)
                    {
                        <li class="filter-button" data-filter="@obj.Name.Replace(' ','_')">@obj.Name</li>
                    }
                </ul>
            </div>
        </div>

        <div class="row portfolio-container" data-aos="fade-up">
            @foreach (var prod in Model.Products)
            {
                <div class="col-lg-4 col-md-6 portfolio-item  filter @Model.Category.Name.Replace(' 
                 ','_')">
                   <div class="portfolio-img"><img src="@Model.ImageUrl" class="img-fluid" alt=""></div>
                    <div class="portfolio-info">
                    <h4>@Model.Title</h4>
                    <p>By <b>@Model.Title</b></p>
                    </div>
                  </div>
            }
        </div>

    </div>
</section>

同位素.js

$(window).on('load', function () {
        var portfolioIsotope = $('.portfolio-container').isotope({
            itemSelector: '.portfolio-item',
        });
});

 $(document).ready(function () {

            $(".filter-button").click(function () {
                $("#portfolio-flters li").removeClass('filter-active');
                $(this).addClass('filter-active');

                var value = $(this).attr('data-filter');
                if (value == "all") {
                    $('.portfolio-item').show('3000');
                }
                else {
                    $(".portfolio-item").not('.' + value).hide('2000');
                    $('.portfolio-item').filter('.' + value).show('2000');

                }
            });

    });

如果我从 isotope.js 中删除 加载窗口上的..portfolio-container 类，则详细信息页面容器不灵活，请检查我的另一个图像（但过滤器工作正常）..

图像卡不灵活

标签： javascriptasp.netasp.net-coreasp.net-mvc-4jquery-isotope

Answer 1

有两种方法：

1、仅将window onload部分改为：

$('.portfolio-container').isotope({
        itemSelector: '.element-item'
    });

然后它会显示给第一个，但是在我的演示中移动需要一些时间。

2、尝试另一种使用同位素的方法：

请注意'portfolio-filters'中的数据过滤器内容 ，它可能与您的不同。这种方式

原理是每次点击不同的过滤按钮时调用同位素

（不同的数据过滤器）。

编辑代码：

存储在数据库中的心智data-filter="[e-mail](' ','_')">@obj.Name</li>数据

是数字，但您可以添加“。” 在'@'之前，所以它可以被同位素识别。

<div class="container">
<div class="row" data-aos="fade-up">
    <div class="col-lg-12 d-flex justify-content-center">
        <ul id="portfolio-flters">
            <li data-filter="*" class="filter-active filter-button">All</li>
            @foreach (var obj in Model.Categories)
            {
                <li class="filter-button" data-filter="[e-mail](' ','_')">@obj.Name</li>
            }
        </ul>
    </div>
</div>
<div class="row portfolio-container" data-aos="fade-up">
    @foreach (var product in Model.Products)
    {
        <partial name="_IndividualProductCard" model="product" />
    }
</div>

@section Scripts
{
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
    $mygrid = $('.portfolio-container').isotope({
        itemSelector: '.portfolio-item'
    });

    $('#portfolio-flters').on('click', 'li', function () {
        var filterValue = $(this).attr('data-filter');
        $mygrid.isotope({ filter: filterValue });
    });
</script>
}

数据库中的数据：

结果：