Question

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

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

当我点击类别时，例如ID为“1”，通过菜单我想在“#posts”div中显示属于ID为“1”的类别的帖子。

因此，＃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为“1”的类别，则会显示目前该ID类别为“1”的唯一帖子的信息：

{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){
            //$('#posts').append(<span>post.title</span>);
        });
        console.log(result);
    },
    error: function(error) {
        console.log(error.status)
    }
});

Answer 1

尝试更改此行，我不知道这是否是拼写错误，但您需要发送一个字符串来追加函数，然后使用javascript中的变量而不是来自php。

//$('#posts').append(<span>post.title</span>);

为：

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

Answer 2

您可以在each方法中构建html，然后将其附加到posts div

$('#posts').empty();

var newPosts = '';

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

$("#posts").html(newPosts);

如何使用append方法在#posts div中显示属于被点击类别的帖子？

2 个答案: