Как открыть текстовое поле ответа только для выбранного комментария?

Question

Есть пост. В посте пользователь также может комментировать и отвечать. Там может быть много комментариев. Каждый комментарий имеет кнопку ответа. Каждая кнопка ответа имеет один и тот же класс reply. Поэтому всякий раз, когда я пытаюсь ответить на определенный комментарий и нажимаю кнопку ответа. Откроется текстовое поле ответа каждого комментария. Я хочу открыть ответ text box для выбранного комментария.

Я попытался сначала скрыть reply form, а затем он появляется после нажатия кнопки ответа. Идентификатор комментария также можно передать из кнопки ответа в jquery.

Blade file
<a href="#" class="reply">Reply</a>
<div class="reply-form">
  <form action="{{route('reply')}}" method="post">
     @csrf
     <input name="reply" type="text">
  </form>
</div>

jquery file
$('.reply-form').hide();
$('.comment-container').delegate(".reply","click",function(e){
  e.preventDefault();
  $('.reply-form').toggle(function(){

  });
})

Для каждого комментария есть кнопка с тем же именем класса reply Таким образом, каждый ответ на комментарии появляется после того, как яclick один reply button.

Answer 1

Попробуйте это

$('.reply-form').hide();
$('.comment-container').delegate(".reply","click",function(e){
  e.preventDefault();
  $($(this).find('.reply-form')).toggle(function(){

  });
});

Answer 2

Попробуйте это с изменением jquery.

Blade file
<a href="#" class="reply">Reply</a>
<div class="reply-form d-none">
  <form action="{{route('reply')}}" method="post">
     @csrf
     <input name="reply" type="text">
  </form>
</div>

добавьте стиль для d-none

.d-none{display:none;}

И jquery as,

$(document).on('click','.reply',function(){
   $(this).closest('.reply-form').removeClass("d-none");
   //$(this).closest('.reply-form').toggleClass("d-none"); //second option if want to show and hide
}

И удалите ссылку= "#" с привязки или добавить javascript: void (0)

Answer 3

Попробуйте следующее:

$('.reply-form').hide();
$('.reply').click(function(e) {
   e.preventDefault();
   var replyForm = $(this).siblings('.reply-form');
   $(replyForm).toggle(function(){

   });
});