Question

我正在构建一个允许线程评论的博客应用。用户可以通过单击＆＃34;回复＆＃34;来回复其他评论。特定评论旁边的按钮。通过这样做，将显示评论表单，用户可以输入他的回复。

我正在使用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();
    });
});

当我单击第一个按钮然后单击第二个按钮时，它可以正常工作。但是，如果我再次单击第一个按钮，则两个表单同时显示。我认为这里应该有问题，但我无法弄明白。

Answer 1

我可以看到一个错误。你忘了定义＆＃34; event＆＃34;作为参数：

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

正确的方式：

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

你正在谈论一个回复按钮，所以我认为你正在谈论同一个班级的其他按钮＆＃34; .comment-reply＆＃34;。

此示例应该可以使用简单的代码完成您正在寻找的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在博客中只显示一个回复表单？

1 个答案: