스레드의 사용자 주석을 인용하십시오.

Question

포럼 스레드의 주석에 회신 기능을 구축하려고합니다. 사용자가 회신을 클릭하면 답장 상자에 회신 된 설명이 자동으로 채워 지므로 아래에 회신을 추가 할 수 있습니다.

필드를 채우기 위해 클릭을 트리거하는 함수를 자바 스크립트로 작성했습니다.

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

이 작동하지만, 그것은 단지 처음 작동하고 만든 마지막 코멘트에 회신 양식을 채우고, 내가 클릭하지 않는 한, 나는 어떻게에있는대로로 의견을 결정하는 데 문제가 있어요 각 루프에 대해 a.

  @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 

이상적으로 나는 것 또한 페이지 필드 (누군가가 도움이 할 수 있다면, 그것은 좋은 것)의 '응답'을 클릭하고 커서 초점 후 buttom의로 이동하지만, 모든 다리를 건너하는 것처럼 내가 그걸 찾아올 때.

감사 거위가 말했듯이, 당신이 정말로 스택 오버플로에 질문을 게시하기 전에 뭔가 자신을 시도해야

Answer 1

많이 :). 그럼에도 불구하고, 내가 왜 당신의 코드가 이러한 결과를 얻는 지 이해하지 못하는 것을 보았 기 때문에 나는 약간의 도움을 제공 할 것이다.

---

이유는 간단 기능은 항상 페이지의 마지막 코멘트 같도록 reply 텍스트 영역을 채 웁니다 자바 스크립트 reply() 당신의. 블레이드 파일에서 foreach 루프의 모든 주석을 반복합니다. 댓글의 각 댓글을 $comment 변수에 보관합니다. 루프가 완료되면 $comment 변수가 게시물의 마지막 댓글과 같습니다. 요약하면 변수의 마지막 값은 $comment이며 게시물의 마지막 코멘트입니다.

이제 블레이드 파일의 맨 아래에 스크립트가 있습니다. foreach 루프 다음에 입니다. 따라서 $comment 변수의 몸체를 {{ $comment->body }}으로 반향하도록 블레이드에 지시하면 의 내용이 반향 주석의 본문을 반향한다고 알려주므로 실제로는 $comment 변수의 값입니다. 따라서 자바 스크립트 reply()을 실행할 때마다 응답의 innerHTML이 게시물의 마지막 주석 본문과 동일하게 변경됩니다.

이러한 이유로 이러한 결과가 나타납니다.

---

은 같은 것을 할 필요가있을 것이다이 (일반 자바 스크립트 사용)를 해결하려면 :

@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; 및 이 아닌 =>

---

이은 물론, 가장 좋은 방법이 아닙니다.가장 좋은 방법은 vue.js 또는이 MVVM 대신 다른 MVVM을 사용하는 것입니다 ...