问题描述
我动态地在我的 .Net 核心项目上应用了同位素过滤器。我成功地做到了,但发生了一个小错误。选择产品的特定类别位置后,不是首先出现的。下面看我的两张图
After Filter check the position of that image not changed(its need to come first)
我的代码如下 索引.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');
}
});
});
如果我删除 ..portfolio-container 类 从 isotope.js 加载窗口 然后详细信息页面容器不灵活检查我的另一个图像(但过滤器工作正常)..
解决方法
有两种方式:
1、只将窗口加载部分改为:
$('.portfolio-container').isotope({
itemSelector: '.element-item'
});
2、尝试另一种使用同位素的方法:
请注意'portfolio-flters' 中的data-filter 内容,它可能与您的不同。这条路
原则是每次点击不同的过滤按钮时都调用同位素
(不同的数据过滤器)。
已编辑的代码:
Mind data-filter=".@obj.Name.Replace(' ','_')">@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=".@obj.Name.Replace(' ','_')">@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>
}
数据库中的数据:
结果:
,@Tisa 我像你说的那样按照你的代码 索引.cshtml
<section 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="*" 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 product in Model.Products)
{
<partial name="_IndividualProductCard" model="product" />
}
</div>
</div>
</section>
_IndividualProductCard.cshtml
@model BornoMala.Models.Product
<div class="col-lg-4 col-md-6 portfolio-item filter @Model.Category.Name.Replace(' ','_')">
<div class="portfolio-img ">
<img src="@Model.ImageUrl" width="100" height="50" />
</div>
</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',function () {
var filterValue = $(this).attr('data-filter');
$mygrid.isotope({ filter: filterValue });
});
</script>
}
产品型号
namespace project.Models
{
public class Product
{
[Key]
public int Id { get; set; }
[Required]
public string Title { get; set; }
[Required]
public string Description { get; set; }
[Required]
public string Artist { get; set; }
[Required]
[Range(1,1000)]
public double Price { get; set; }
public string ImageUrl { get; set; }
[Required]
public int CategoryId { get; set; }
[ForeignKey("CategoryId")]
public Category Category { get; set; }
[Required]
public int StyleId { get; set; }
[ForeignKey("StyleId")]
public Style Style { get; set; }
}
}
productdetailsVM
namespace project.Models.ViewModels
{
public class ProductDetailsVM
{
public IEnumerable<Product> Products { get; set; }
public IEnumerable<Category> Categories { get; set; }
}
}
但是所有类别的图像都显示其他人没有图像显示 blank image
我已经用 jquery 修复了过滤,但问题是图片位置不会因为“$mygrid”没有调用而改变,所以如何调用
@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'
});
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$('.filter').show('0010');
}
else
{
$(".filter").not('.'+value).hide('0010');
$('.filter').filter('.'+value).show('0010');
}
});
</script>