Question

我正在尝试在论坛帖子中对评论构建回复功能，因此当用户点击回复时，它会自动使用回复的评论填充回复框，以便他们可以在下面添加回复。

我已经在javascript中编写了一个函数来触发点击以填写该字段。

    <script>
        function reply() {
            document.getElementById("reply").innerHTML = "{{ $comment->body }}";
        }
    </script>

这有效，但它只能在第一次工作，它填写了最后评论的回复表单，而不是我点击的那个，我无法确定它是什么，因为它在每个循环中

            @foreach ($post->comments as $comment)
            <div id="main">
                <!-- Comments -->
                <div class="post-box">
                    <article class="post">
                        <header>
                            <div class="title">
                                <p>Posted {{ $comment->created_at->diffForHumans() }}</p>
                            </div>
                            <div class="meta">
                                <a href="../profile/{{ $comment->user->id }}-{{$comment->user->name}}" class="author"><span class="name">{{ $comment->user->name }}</span><img src="{{ url('images/avatar.jpg') }}" alt="User Avatar" /></a>
                            </div>
                        </header>
                        <p id="comment">{{ $comment->body }}</p>
                        <footer>
                            <ul class="stats">
                                <li><a href="#" class="icon fa-heart">28</a></li>
                            </ul>
                            <div class="reply-button">
                                <a href="#" onclick="reply()" class="button icon fa fa-reply">Reply</a>
                            </div>
                        </footer>
                    </article> 
                </div>
            </div>
            @endforeach

理想情况下，我还希望页面在点击“回复”并且光标聚焦于该字段后滚动到按钮（如果有人可以提供帮助，这将是很棒的）但是当我来到时，跨越每个桥它

非常感谢：）

Answer 1

正如Goose所说，在Stack Overflow上发布问题之前，你真的需要自己试一试。尽管如此，由于我发现你不明白为什么你的代码会产生这些结果，我会提供一些帮助。

您的reply() javascript函数始终将reply文本区域填充为等于页面中最后一条注释的原因很简单。在您的刀片文件中，您循环遍历foreach循环中的所有注释。您可以在$comment变量的帖子评论中保留每条评论。循环结束后，$comment变量等于帖子中的最后一条评论。简而言之，设置为$comment变量的最后一个值是帖子中的最后一条评论。

现在，在刀片文件的底部有脚本。这是在你的foreach循环之后。因此，当你指示刀片用$comment回显{{ $comment->body }}变量的主体时，你实际上是在告诉它回应最后注释的主体，因为那是您$comment变量的值。因此，每当您运行Javascript reply()函数时，您所做的只是将回复的innerHTML更改为等于帖子中最后一条评论的正文。

这就是你得到这些结果的原因。

要解决此问题（使用普通的Javascript），您需要执行以下操作：

@foreach ($post->comments as $comment)
    ...
    <p class="comment-body" id="comment-{{ $comment->id }}">{{ $comment->body }}</p>
    ....
    <div class="reply-button">
        <a href="#" onclick="reply({{ $comment->id }})" class="button icon fa fa-reply">Reply</a>
    </div>
    ...
@endforeach

<script>
    function reply(id) {
        document.getElementById("reply").value= document.getElementById("comment-"+id).innerHTML;
    }
</script>

修改：确保使用 value ，例如= =＆gt; document.getElementById("reply").value= document.getElementById("comment-"+id).innerHTML;和不就像这样=＆gt; ~~document.getElementById("reply").innerHTML= document.getElementById("comment-"+id).innerHTML;~~

当然，这不是最好的解决方案。最好的方法是使用vue.js或其他一些MVVM代替这个，好吧，hackery ......

在一个帖子中引用用户评论

1 个答案: