ブログに返信フォームを1つだけ表示するにはどうすればよいですか？

Question

私はスレッドのコメントを許可するブログアプリを構築しています。ユーザーは、特定のコメントの横にある「返信」ボタンをクリックして、他のコメントに返信することができます。これにより、コメントフォームが表示され、ユーザーは自分の返信を入力することができます。私はここに、この機能を構築するためにjQueryを使用しています

は私のコードです：

$(document).ready(function(){ 
    $(".comment-reply").bind("click.a", function(){ 

     // hide all forms 
     $(".comment-form-reply").hide(); 

     // bind buttons with "click" events again, because one of them is unbinded 
     $(".comment-reply").bind("click.c", function() { 
      $(this).parent().siblings(".comment-form-reply").show(); 
     }); 

     // show the comment form for current item 
     $(this).parent().siblings(".comment-form-reply").show(); 

     // unbind current button with "click" event to prevent multiple forms 
     $(this).unbind(".a"); 
    }); 

    $(".comment-reply").bind("click.b", function(){ 
     event.preventDefault(); 
    }); 
}); 

私が最初にした後、第2ボタンをクリックすると、それはうまく動作します。しかし、最初のボタンをもう一度クリックすると、2つのフォームが同時に表示されます。私はここに何か間違っているはずだと思いますが、私はそれを理解することができません。

Answer 1

私は1つの間違いを見ることができます。あなたは、パラメータとして「イベント」を定義するのを忘れ：

$(".comment-reply").bind("click.b", function(){ 
    event.preventDefault(); 
}); 

正しい方法：

$(".comment-reply").bind("click.b", function(event){ 
    event.preventDefault(); 
}); 

をあなたは返信ボタンについて話しているので、私は、あなたが話していると思うするつもりです.comment-reply "と同じクラスの他のボタン。

この例は、簡単なコードで探しているものとまったく同じです。

$(document).ready(() => { 
 
    
 
    $(".comment-reply").on("click", evt => { // Use "submit" instead of "click" for form submition ! 
 
     // Prevent site from updating (this is only needed for submit-buttons inside a form) 
 
     evt.preventDefault(); 
 
     
 
     // Define varibles 
 
     var elmt   = $(evt.target), 
 
      elmt_sib_c = elmt.parent().siblings(".comment"), 
 
      elmt_sib_cfr = elmt.siblings(".comment-form-reply"), 
 
      elmt_sib_exit = elmt.siblings(".comment-form-reply-exit"); 
 
     
 
     if (elmt_sib_cfr.css("display") === "none") { 
 
      
 
      // Show reply-field 
 
      elmt_sib_cfr.show(); 
 
      elmt_sib_exit.show(); 
 
     } else if (elmt_sib_cfr.val() != "") { 
 
      // Hide reply-field 
 
      elmt_sib_cfr.hide(); 
 
      elmt_sib_exit.hide(); 
 
      
 
      //*// 
 
      console.log(
 
       "Posted to DB at comment: '", 
 
       elmt_sib_c.text(), 
 
       "' with content of: '", 
 
       elmt_sib_cfr.val(), 
 
       "'" 
 
     ); 
 
      //*// 
 
     } else if (elmt_sib_cfr.val() == "") { 
 
      
 
      elmt_sib_cfr.focus() 
 
     } 
 
     
 
     // Empty reply-field 
 
     elmt_sib_cfr.val(""); 
 
    }); 
 
    // 
 
    $(".comment-form-reply-exit").on("click", evt => { 
 
     
 
     // Define varibles 
 
     var elmt   = $(evt.target), 
 
      elmt_sib_cfr = elmt.siblings(".comment-form-reply"); 
 
     
 
     function hide() { 
 
      // Hide reply-field 
 
      elmt_sib_cfr.hide(); 
 
      elmt.hide(); 
 
     } 
 
     
 
     if (elmt_sib_cfr.val() == "") { 
 
      hide() 
 
     } else if (confirm("Are you sure?")) { 
 
      hide() 
 
     } 
 
    }); 
 
});

.comment-form-reply { 
 
    display: none; 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
} 
 
.comment-form-reply-exit { 
 
    display: none; 
 
    margin-left: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <div class="comment">This is comment '0'.</div> 
 
    
 
    <form action="/" method="post"> 
 
    <input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button> 
 
    <br> 
 
    <button type="submit" class="comment-reply">Reply</button> 
 
    </form> 
 
</div> 
 
<br><br> 
 
<div> 
 
    <div class="comment">This is comment '1'.</div> 
 
    
 
    <form action="/" method="post"> 
 
    <input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button> 
 
    <br> 
 
    <button type="submit" class="comment-reply">Reply</button> 
 
    </form> 
 
</div> 
 
<br><br> 
 
<div> 
 
    <div class="comment">This is comment '2'.</div> 
 
    
 
    <form action="/" method="post"> 
 
    <input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button> 
 
    <br> 
 
    <button type="submit" class="comment-reply">Reply</button> 
 
    </form> 
 
</div> 
 
<br><br> 
 
<div> 
 
    <div class="comment">This is comment '3'.</div> 
 
    
 
    <form action="/" method="post"> 
 
    <input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button> 
 
    <br> 
 
    <button type="submit" class="comment-reply">Reply</button> 
 
    </form> 
 
</div>