Q&A
やりたいこと
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件
0
ベストアンサー
関連する要素たちを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
総合スコア955
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/04 06:13
2020/08/04 06:25