Question

在我的网站上，我正在为用户建立自己的博客，并希望人们在帖子下发表的评论是可编辑的。不幸的是，我无法做到这一点。因为它们都具有相同的类/ ID。

我曾尝试使用data-id，但在这些方面我并不真正擅长。除此之外，我已经搜索了很长一段时间，但找不到能帮助我使用现有代码的任何东西。

获取帖子和评论的功能

    public function announcement(Announcement $announcement)
    {
        $announcements = Announcement::findOrFail($announcement->id);

        $category_lists = Category::withCount('posts')->get();
        $replies = Reply::where('post_id', $announcement->id)->paginate(5);
        return view('announcements.details', compact('announcements', 'category_lists', 'replies'));
    }

每个评论：

                    @foreach($replies as $reply)
                        <div class="announcement">
                            @if(Auth::user()->admin == 1 || Auth::user()->id == $reply->user_id)
                                <a href="/reactie/destroy/{{$reply->id}}" class="float-right"><i class="fal fa-dumpster"></i></a>
                            @endif
                            @if(Auth::user()->id == $reply->user_id)
                            <i class="fal fa-pencil float-right" id="yeet" class="float-right showhidereply" style="color: #007ac3; margin-right: 10px;" data-id="{{ $reply->id }}"></i>
                            @endif
                            <p style="font-size: 0.8rem;">{{$reply->created_at->diffForHumans()}} | Geplaatst door <span>{{$reply->username}}</span></p>
                            <p style="margin-top: -10px;">{!! $reply->post_content !!}</p>
                            @if(Auth::user()->id == $reply->user_id)
                            <div class="reply-expand-{{$reply->id}}" style="display: none;">
                                <form method="POST" action="{{ route('Reply Edit', ['id' => $reply->id]) }}">
                                    @csrf
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <strong>Reactie Aanpassen:</strong>
                                            <textarea class="form-control summernote" name="detail">{!! $reply->post_content !!}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                        <button type="submit" class="btn btn-primary pull-right" style="border-radius: 0px; box-shadow: 0px 1px 10px -4px #000000;">Aanpassen</button>
                                    </div>
                                </form>
                            </div>
                            @endif
                            <hr>
                        </div>
                    @endforeach

编辑功能：

    public function postSummernoteeditorReply(Request $request, $id){
        $this->validate($request, [
            'detail' => 'required',
        ]);

        $detail=$request->detail;
        $dom = new \DomDocument();
        $dom->loadHtml( mb_convert_encoding($detail, 'HTML-ENTITIES', "UTF-8"), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
        $images = $dom->getElementsByTagName('img');

        foreach($images as $img){
            $src = $img->getAttribute('src');

            // if the img source is 'data-url'
            if(preg_match('/data:image/', $src)){

                // get the mimetype
                preg_match('/data:image\/(?<mime>.*?)\;/', $src, $groups);
                $mimetype = $groups['mime'];

                // Generating a random filename
                $filename = uniqid();
                $filepath = "/img/blog/$filename.$mimetype";

                // @see http://image.intervention.io/api/
                $image = Image::make($src)
                    // resize if required
                    /* ->resize(300, 200) */
                    ->encode($mimetype, 100)    // encode file to the specified mimetype
                    ->save(public_path($filepath));

                $new_src = asset($filepath);
                $img->removeAttribute('src');
                $img->setAttribute('src', $new_src);

            } // <!--endif
        } // <!--endforeach

        $detail = $dom->saveHTML();
        $summernote = Summernote::find($id);
        $summernote->post_content = $detail;
        //dd($summernote->post_content);
        //dd($summernote->post_id);
        $summernote->update();

        return redirect(url()->previous());
}

jQuery显示编辑形式：

        $(document).ready(function() {
            $('.summernote').summernote({
                height: 400,
            });
            $('#yeet').click(function() {
                $('.reply-expand').toggle("slide");
            });

            // change the selector to use a class
            $("#yeet").click(function(){
                // this will query for the clicked toggle
                var $toggle = $(this);

                // build the target form id
                var id = "#replycomment-" + $toggle.data('id');

                $( id ).toggle('slide');
            });

        });

预期结果应该是能够通过单击注释旁边的编辑图标（铅笔）并在可以编辑之前显示表格来单独编辑每个注释。我已经具有编辑功能并显示正在运行的表单，但仅用于第一个注释。

我希望有人能够提供帮助！非常感谢！

编辑：当我单击第一个注释上的编辑按钮时，它将打开包含第二个/最后一个注释的数据的表单，但是单击第二个/最后一个编辑按钮没有任何作用。

Answer 1

首先为可点击项提供唯一的ID。现在它们都具有相同的ID（还），这可能是问题的原因。

<i class="fal fa-pencil float-right yeet" id="yeet-{{ $reply->id }}" class="float-right showhidereply" style="color: #007ac3; margin-right: 10px;"></i>

我们可以让yeet作为一个类来处理所有评论的点击事件。这样，每个注释将具有不同的ID，并且它们都将经历相同的click事件。

现在更改选择器以使用ID的yeet类。

$('.yeet').click(function() {
    //get the clicked element id and toggle the respective form
}

您必须以与以前相同的方式向表单添加唯一的ID，以便能够独立切换每个ID。

我希望能够编辑我的foreach中提供的数据

1 个答案: