Javascript 在线程中引用用户评论

我正在尝试在论坛线程中的评论上构建一个回复函数，这样当用户单击回复时，它会自动用回复的评论填充回复框，以便他们可以在下面添加回复

我已经用javascript编写了一个函数，用于在单击时触发以填充字段

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

函数reply（）{
document.getElementById（“reply”）.innerHTML=“{{{$comment->body}”；
}

这是可行的，但它只在第一次有效，它用最后一条评论填写回复表单，而不是我单击的那条，我很难确定它是哪条评论，因为它在for each循环中

            @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

@foreach（$post->comments as$comment）
{{$comment->body}



@endforeach

理想情况下，我也希望页面在点击“回复”后滚动到按钮，光标集中在字段上（如果有人能帮忙，那就太好了），但当我到达它时，它会跨越每一个桥梁

---

非常感谢：）

正如Goose所说，在发布有关堆栈溢出的问题之前，您确实需要自己尝试一下。尽管如此，由于我发现您不理解代码为什么会产生这些结果，我将提供一些帮助

---

reply（）

javascript函数总是填充

reply

文本区域，使其与页面中的最后一条注释相等，原因很简单。在blade文件中，您正在

foreach

循环中遍历所有注释。您可以在

$comment

变量中保留帖子注释中的每条注释。循环完成后，

$comment

变量等于文章中的最后一条注释。简而言之，设置为

$comment

变量的最后一个值是文章中的最后一条注释

现在，在刀片文件的底部有脚本。这是您的foreach循环之后的。因此，当您指示blade用

{{$comment->body}

回显

$comment

变量的主体时，实际上是在告诉它回显最后一条注释的主体，因为这是

$comment

变量的值。因此，每当您运行Javascript

reply（）

函数时，您所做的就是将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

@foreach（$post->comments as$comment）
...
{{{$comment->body}
....
...
@endforeach

---

功能回复（id）{
document.getElementById（“reply”）.value=document.getElementById（“comment-”+id）.innerHTML；
}

编辑：确保像这样使用

值=>
document.getElementById（“回复”）.value=document.getElementById（“注释-”+id）.innerHTML
和不像这样=>
document.getElementById（“回复”）.innerHTML=document.getElementById（“注释-”+id）.innerHTML


当然，这不是最好的解决办法。最好的方法是使用vue.js或其他MVVM，而不是这个，好吧，hackery…
我会尽你最大的努力，当你陷入困境时（即使很早），发布一个新问题，让我们与你一起解决。由于这个问题是现在，它没有显示出任何努力，也没有开始工作的起点。我更新了@GooseThanks的帖子这么多的帮助，我确实理解识别评论的问题，因为foreach循环，并且不太精通javascript，因此我asked@user6073700好如果这有助于你接受它作为答案，那么问题就结束了。不过我还有一个问题，为什么在我清除文本字段并尝试重新添加到另一条评论后，它不起作用？如果你按照我的指示，你就不应该有这样的问题。好吧，我们是负责人
<script>
    function reply(id) {
        document.getElementById("reply").value= document.getElementById("comment-"+id).innerHTML;
    }
</script>