중첩 된 댓글에 답장 양식을 가장 손쉽게 추가하는 방법

Question

내 앱에 중첩 된 (reddit 같은) 댓글을 추가하고 있습니다.

.comment { 
    margin-left: 40px; 
} 

이 댓글을 표시 잘 작동 : 지금까지 난 그냥 comment 내 CSS에서 내가 이렇게 된 div를 사용하고 있습니다. 내 질문은 이제 각 의견에 회신 양식을 추가하는 가장 깨끗한 방법은 무엇입니까 (사용자가 일종의 회신 단추를 클릭 할 때만 표시).

일반적으로 댓글의 모든 입력란을 즉시 추가하고 처음에는 숨기고 사용자가 답장 버튼을 클릭하면 표시됩니다. 또는 사용자가 해당 댓글에 대한 답글을 클릭하면 해당 div에 해당 <form> HTML 코드 만 추가해야합니까?

가장 손쉬운 방법은 무엇입니까?

Answer 1

당신이 할 수있는 하나의 양식 필드가 HTML에서 어딘가에 숨겨져 사용자가이 jsFiddle example을 commect 클론 폼 요소를 클릭하고 주석 DIV에

체크 아웃을 추가 어느 때 아래의 코드입니다 가짐으로써

<div class="comment"> 
    comment1 
</div> 
<div class="comment"> 
    comment2 
</div> 
<div style="display:none"> 
    <form id="commentForm"> 
     <textarea name="comment"></textarea> 
    </form> 
</div> 

var Comment = { 
    init: function() { 
     $(".comment").bind('click', $.proxy(this.handleClick, this)); 
    }, 
    handleClick: function(evt) { 
     var form = $('#commentForm').clone(); 
     var target = $(evt.target); 
     var isFormAvailable = $("#commentForm", target).length > 0; 
     if(!isFormAvailable) { 
      $(evt.target).append(form); 
     } 
    } 
}; 

$(function() { 
    Comment.init(); 
}); 

Answer 2

서식의 서식 파일을 문서의 어딘가에 보관하고 숨겨야합니다. 의견 옆에있는 답글을 클릭하면 다음을 수행하십시오.

1. 복제 템플릿
2. 는
3. 를 클릭하고있다 회신하는 주석의 ID로 템플릿에 숨겨진 필드를 설정합니다 (당신이 복제 기능을 jQuery를 할 수 있습니다)가 다음 될 그 필요성을 언급 추가 대답했다

나는 이것과 함께 갈 것이다.

각 코멘트가있는 입력란을 당장 보관하지 마십시오. 불필요하게 페이지 크기를 늘리고 있습니다.