Question

我有一个包含一些帖子类别的菜单：

<ul>
    @foreach($categories->get() as $category)
        <li class="ative">
            <a href="#" name="category" id="{{$category->id}}">{{$category->name}}</a>
        </li>
    @endforeach
</ul>

当我点击类别时，例如ID＆＃34; 1＆＃34;，通过菜单，我想显示属于ID＆＃34; 1＆＃34;属于＆的类别的帖子＃34;＃帖＆＃34;格。

因此，＃post div显示了首次访问页面时的最后一些帖子，但在点击某个类别后，它应显示属于所点击类别的帖子。所以我有#posts div：

<div id="posts">
    @foreach($posts as $post)
    <div id="posts">
         <img src="{{$post->image}}">
        <h1>{{$post->title}}</h1>
        <!-- ... -->
    </div>
    @endforeach
</div>

如果类别为id＆＃34; 1＆＃34;在控制台中单击，将显示当前对于该类别的唯一帖子的信息，其中包含ID＆＃34; 1＆＃34;：

{id: 1, title: "Title", description: "", …}

现在您知道如何使用append方法在#posts div中显示属于所点击类别的帖子吗？像下面的东西（但下面不适用）：

$('#posts').append(
    <div id="posts">
      <img src="{{$post->image}}">
      <h1>{{$post->title}}</h1>                    
     </div>);
 });

我有一个显示主页的FrontController索引方法：

public function index(){
        return view('home')
            ->with('categories', Category::orderBy('created_at', 'desc')->get())
            ->with('posts', Post::orderBy('created_at','desc')->get());
    }

我还有一个PostController，它有一个方法postsFromCategory来获取所选类别的帖子：

 public function WhereHasCategory(Request $request)
    {
        $posts = Post::whereHas('categories', function ($categories) use (&$request) {
            $categories->where('category_post.id',$request->id);
        })->get();
        return response()->json($posts);
    }

然后在index.blade.php中我有ajax：

$.ajax({
    url: '{{ route('category.posts',null) }}/' + category_id,
    type: 'GET',
    success:function(result){
        $('#posts').empty();
        $.each(result, function(index, post) {
         newPosts += '<img src="' + post.image + '">' +
         + '<h1>' + post.title + '</h1>';
        });


        console.log(result);
    },
    error: function(error) {
        console.log(error.status)
    }
});

Answer 1

我从未在laravel编码，所以语法将会关闭，但我希望这个要点坚持：

首先，您不应使用“帖子”之类的重复ID。尝试将"post" + $key分配给foreach中的每个div：

<div id="posts">
    @foreach($posts as $key => $post)
    <div id="post" + $key>
         <img src="{{$post->image}}">
        <h1>{{$post->title}}</h1>
        <!-- ... -->
    </div>
    @endforeach
</div>

现在，如果您使用以下代码检索每个类别的帖子：

$.each(result, function(index, post) {
         newPosts += '<img src="' + post.image + '">' +
         + '<h1>' + post.title + '</h1>';
        });

你可以尝试：

var newPosts = "";
$.each(result, function(index, post) {
         newPosts += '<img src="' + post.image + '">' +
         + '<h1>' + post.title + '</h1>';
        });
$('#posts').html(newPosts);

让我知道

Answer 2

将ID更改为类

<div class="posts">
@foreach($posts as $post)
<div id="posts">
     <img src="{{$post->image}}">
    <h1>{{$post->title}}</h1>
    <!-- ... -->
</div>
@endforeach
</div>

不需要代码$('#posts').append()，因为我们可以在ajax的成功回调中添加它。

将ajax函数改为此

$.ajax({
url: '{{ route('category.posts') }}',
type: 'GET',
data : { id:category_id },
success:function(result){
    $('#posts').empty();
    var newPosts='';
    $.each(result, function(index, post) {
     newPosts += '<img src="' + post.image + '">' +
     + '<h1>' + post.title + '</h1>';
    });
    $('#posts').html(newPosts);

},
error: function(error) {
    console.log(error.status)
}
});

使用未定义的常量帖子 - 假设＆＃39; post＆＃39;

2 个答案: