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')); }Cambia la forma de peinar. actualmente, está utilizando blog--left y blog--right para la sección izquierda y derecha, elimine esa clase del div y aplique el siguiente estilo al estilo.
.blog { width: 50%; }La alternancia no funciona, porque tienes tu "alternancia" implementada con PHP. PHP - es del lado del servidor. Está implementando el filtrado en js - lado del cliente. Entonces, cuando selecciona cualquier filtro, su página (html) no se vuelve a representar ( @foreach ($blogs as $index => $blog) ya no se ejecuta porque es PHP). Así que mi sugerencia sería: