Jqueryでyoutube みたいにクリックすると返信ができるスライドを出したい

やりたいこと

postがあり返信するをクリックすると返信ようのコメント欄を出したいのですが、jqueryでthis のやり方がわからないのでここで質問させていただきます。

 <% @posts.each do |post| %>
   <div class="posts-index-item">
.
.
.
<div class="post-menus-left">
<i class="fas fa-reply-all"></i>
</div>
</div>

   <div class="reply-form">
     <div class="reply-form-body">
       <input name="title" class="title-area" placeholder="回答に質問または返信する">
     </div>
   </div>
   <% end %>

というコードがあり、任意の　<i class="fas fa-reply-all"></i>　をクリックするとその投稿のコメント欄のみ表示させたいのですが、そのやり方がわかりません。

$(document).on('turbolinks:load', function(){
  $('.fa-reply-all').click(function(){
    $('.reply-form').slideToggle();
  });
});

これでは全てのコメント欄が表示されてしまうので何かいい方法を教えていただき

行動規範の内容に同意します

回答1件

ベストアンサー

関連する要素たちをdivで囲って、eachで回して、
先祖要素から指定するのはどうでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6  <style>
7    .reply-form {
8      display: none;
9    }
10  </style>
11</head>
12<body>
13  <div class="box">
14    <div class="post-menus-left">
15      <i class="fas fa-reply-all">表示</i>
16    </div>
17
18    <div class="reply-form">
19      <div class="reply-form-body">
20        <input name="title" class="title-area" placeholder="回答に質問または返信する">
21      </div>
22    </div>
23  </div>
24
25  <div class="box">
26    <div class="post-menus-left">
27      <i class="fas fa-reply-all">表示</i>
28    </div>
29
30    <div class="reply-form">
31      <div class="reply-form-body">
32        <input name="title" class="title-area" placeholder="回答に質問または返信する">
33      </div>
34    </div>
35  </div>
36  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
37  <script>
38    $(function() {
39      $(".box").each(function() {
40        $("i", this).on('click', function() {
41          $(this).closest(".box").find(".reply-form").slideToggle();
42        })
43      })
44    });
45  </script>
46</body>
47</html>
48

投稿2020/08/04 05:46

akihiro3

総合スコア955

atage517

2020/08/04 06:13

akihiro3 ありがとうございます。その方法でもできましたしかし、問題は <% @post.answers.each do |answer| %> <div class="posts-index-item"> . . <div class="post-menus-left"> <i class="fas fa-reply-all"></i> </div> </div>  <div class="reply-form"> <div class="reply-form-body"> <input name="title" class="title-area" placeholder="回答に質問または返信する"> </div> </div> <% end %> となっています。　 Post と　reply のフォームは一体化させないで任意のpostの下にそれに値するreply-fromだけを表示させたいです。

atage517

2020/08/04 06:25

posts-index-item をさらに囲うことでできました！ありがとうございました！

行動規範の内容に同意します