Tengo una función javascript que filtra categorías. También hay intercalado de listas en php.blade.
El problema es que la alternancia solo funciona cuando el filtrado tiene Todos, y cuando seleccionamos una categoría específica, la alternancia no funciona. ¿Cómo se puede arreglar esto?
$('.category-filter_item').click(function(){ $('.category-filter_item').removeClass('active') $(this).addClass('active') var dataFilter = $(this).attr('data-filter'); $('.blog-list').hide() $(dataFilter).show() }) @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')); }No necesita crear dos div separados para las publicaciones izquierda y derecha, solo haga un solo div y diseñe como se muestra a continuación
.post { /* right post styling here */ } .post:nth-child(odd) { /* left post styling here */ }Puede cambiar la posición izquierda y derecha según sus necesidades.
.post { background: green; text-align: right; } .post:nth-child(odd) { background: red; text-align: left; } <div class="post-list"> <div class="post" > <h2 class="post_title">post 1</h2> </div> <div class="post"> <h2 class="post_title">post 2</h2> </div> <div class="post"> <h2 class="post_title">post 3</h2> </div> <div class="post" > <h2 class="post_title">post 4</h2> </div> <div class="post"> <h2 class="post_title">post 5</h2> </div> <div class="post"> <h2 class="post_title">post 6</h2> </div> </div>Puede usar :nth-child(odd) y :nth-child(even) para seleccionar el contenedor .post-list relevante y luego ocultar el lado relevante:
.post-list:nth-child(even) .post-left, .post-list:nth-child(odd) .post-right { display: none; } <div class="post-list"> <div class="post post-left"> <h2 class="post_title">L1</h2> </div> <div class="post post-right"> <h2 class="post_title">R1</h2> </div> </div> <div class="post-list"> <div class="post post-left"> <h2 class="post_title">L2</h2> </div> <div class="post post-right"> <h2 class="post_title">R2</h2> </div> </div> <div class="post-list"> <div class="post post-left"> <h2 class="post_title">L3</h2> </div> <div class="post post-right"> <h2 class="post_title">R3</h2> </div> </div>