按类别JavaScript过滤数据

Question

我是javascript新手。我们有一个类别选择函数。你能帮忙建议一个过滤功能，当选择一个特定的类别时，将从这个类别中按ID拉出所有的博客吗?

JavaScript

document.querySelectorAll('.category-filter_item').forEach(el => {
el.addEventListener('click', () => {
document
.querySelector('.category-filter_item.active')
.classList.remove('active');
el.classList.add('active');

我们在博客页面上有如下代码。首先，我们得到所有可用的类别，然后是一个包含所有博客的列表.

@extends('layouts.app')
@section('content')
<div class="container">
<div class="category-filter" id="filter">
<div class="category-filter_item active">All</div>
@foreach($categories as $category)
<div class="category-filter_item">{{ $category->title }}</div>
@endforeach
</div>
@foreach($blogs as $blog)
<div class="blog-list {{ $blog->category_id}}">
<h2 class="blog_title">{{ $blog->title }}</h2>
</div>
@endforeach
</div>
@endsection

h2控制器

public function index()
{
$blogs = Blog::all();
$categories = Category:all();
return view('blog', compact('blogs', 'categories'));
}

开发环境Laravel

交替

@foreach ($blogs as $index => $blog)
<div class="blog-list">
@if ($index % 2 === 1) 
<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

Answer 1

你可以使用同位素.js，这将是简单而美好的。

或者使用以下代码:

@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 $blog)
<div class="blog-list category_{{ $blog->category_id}}">
<h2 class="blog_title">{{ $blog->title }}</h2>
</div>
@endforeach
</div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script>
$('.category-filter_item').click(function(){
$('.category-filter_item').removeClass('active')
$(this).addClass('active')
var dataFilter = $(this).attr('data-filter');
$('.blog-list').hide()
$(dataFilter).show()
})
</script>