我在我的.Net核心專案上動態地應用了同位素過濾器。我成功地做到了這一點，但出現了一個小錯誤。在選擇了產品的特定類別位置后，產品的位置沒有出現在前面。下面是我的兩張圖片
2,嘗試另一種使用同位素的方法：
注意data-filter中的'portfolio-flters'內容，它可能與你的不一樣。這種方式的
原則是，當你點擊不同的過濾器按鈕時，每次都要呼叫同位素
。（不同的資料過濾器）。
編輯的代碼：
注意 data-filter="[email protected](','_')">@obj.Name</li>資料存盤在資料庫中
是數字，但你可以在'@'之前添加'.'，這樣就可以被同位素識別。
<div class="container">
< div class="row" data-aos="fad-up">/span>
<div class="col-lg-12 d-flex justify-content-center"/span>>
<ul id=" portfolio-flters">
< li data-filter="*" class="filter-active filter-button"> 所有</li>/span>
@foreach (var obj in Model.Categories)
{
< li class="filter-button" data-filter="[email protected](' ,'_') ">@obj. Name</li>@obj.
}
</ul> }。
</div>/span>
</div>/span>
< div class="row portfolio-container" data-aos="fad-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"/span>> </script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"/span>> </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>
}
資料庫中的資料：
結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319278.html
標籤：