按类别过滤数据
提问于 2021-09-22 01:40:10
我有一个过滤类别的javascript函数。在php.blade中也有列表的交错。
问题是，只有当过滤具有全部时，交替才有效，而当我们选择特定类别时，交替不起作用。如何解决这个问题？
JavaScript
$('.category-filter_item').click(function(){
$('.category-filter_item').removeClass('active')
$(this).addClass('active')
var dataFilter = $(this).attr('data-filter');
$('.blog-list').hide()
$(dataFilter).show()
})php.blade
@extends('layouts.app')
@section('content')
<div class="container">
<div class="category-filter" id="filter">
<div class="category-filter_item active" data-filter="*">All</div>
@foreach($categories as $category)
<div class="category-filter_item" data-filter=".category_{{$category->id}}">{{ $category->title }}</div>
@endforeach
</div>
@foreach ($blogs as $index => $blog)
<div class="blog-list">
@if ($index % 2 === 1) //Alternation
<div class="blog blog--left" >
<h2 class="blog_title">{{ $blog->title }}</h2>
</div>
@else
<div class="blog blog--right">
<h2 class="blog_title">{{ $blog->title }}</h2>
</div>
@endif
</div>
@endforeach
</div>
@endsection控制器
public function index()
{
$blogs = Blog::all();
$categories = Category:all();
return view('blog', compact('blogs', 'categories'));
}
回答 2
Stack Overflow用户
发布于 2021-09-22 02:29:25
更改样式的方式。当前，您正在对左侧和右侧部分使用blog--left和blog--right，从div中删除该类，并将下面的样式应用于样式。
.blog {
width: 50%;
}Stack Overflow用户
发布于 2021-09-22 03:11:14
交替不起作用，因为你已经用PHP实现了你的“交替”。PHP -是服务器端。你在js客户端实现了过滤。因此，当您选择任何过滤器时，您的页面(html)不会重新呈现(@foreach ($blogs as $index => $blog)不再运行，因为它是PHP)。所以我的建议是：
浮动删除类博客--left，用于浮动类的blog--right
- add样式.blog { .blog :50%；blog--right
- add: left;} (如果您的浮动有任何边距，您可以尝试宽度49%或更小).blog
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69281730
复制
腾讯云开发者
