2013-03-16 3 views
0

Я добавляю вложенные комментарии (reddit-like) к моему приложению; до сих пор я только с помощью comment дивы, где в моем CSS я делаю это:Самый чистый способ добавить формы ответа к вложенным комментариям

.comment { 
    margin-left: 40px; 
} 

Это прекрасно работает для отображения комментариев. Мой вопрос заключается в том, что самый чистый способ теперь добавлять формы ответов к каждому комментарию (и показывать это только тогда, когда пользователь нажимает кнопку ответа какой-то)?

Как правило, это делается путем добавления всех полей ввода для комментариев сразу, спрятав их сначала, а затем только показывая их, если пользователь нажимает кнопку ответа? Или, может быть, я должен только добавить соответствующий код HTML <form> к данному div после того, как пользователь нажмет ответ за этот комментарий?

Каков самый чистый способ сделать это?

+0

Я бы добавил с добавлением 'form' только тогда, когда пользователь нажимает. – hjpotter92

ответ

2

Вы можете сделать это, имея один вид поле спрятано где-то в HTML, и когда-либо пользователь нажимает на клоне commect формы элемента и добавить его к комментарию DIV

проверки этого jsFiddle example ниже фрагмент кода

<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(); 
}); 
+0

Это, кажется, лучшее решение, но как я могу предотвратить, чтобы форма комментария не была добавлена ​​несколько раз, если пользователь нажимает на комментарий несколько раз? – houbysoft

+0

@houbysoft checkout обновленный ответ, чтобы предотвратить добавление нескольких форм –

+0

Спасибо, отлично работает! – houbysoft

0

Храните шаблон формы где-то в своем документе и держите его скрытым. По щелчку ответа рядом с любым комментарием выполните следующие действия.

  1. Clone шаблон (вы можете Jquery функции клонирования)
  2. Установите скрытое поле в шаблоне идентификатора комментария, для которого-ответа нажимали
  3. добавить его рядом с комментарием, что нужно быть

Я поеду с этим.

Держите поля ввода с каждым комментарием сразу, не имеет смысла. Это необязательно увеличивает размер страницы.

 Смежные вопросы

  • Нет связанных вопросов^_^