在线程中引用用户评论[关闭]

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 循环中的所有 cmets。您将帖子 cmets 中的每条评论保存在 $comment 变量中。当您的循环完成时，$comment 变量等于您帖子中的最后一条评论。简而言之，设置为 $comment 变量的最后一个值是帖子中的最后一条评论。

现在，在您的刀片文件的底部有您的脚本。这是在您的 foreach 循环之后。因此，当您指示刀片用 {{ $comment->body }} 回显 $comment 变量的主体时，实际上是在告诉它回显 last 注释的主体，因为那是您的值$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 像这样 => document.getElementById("reply").value= document.getElementById("comment-"+id).innerHTML; 和 不是 像这样 => @ 987654335@

---

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