0

我是 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

控制器

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
4

1 回答 1

1

你可以使用Isotop.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>
于 2021-09-21T18:10:10.537 回答