javascript - JQuery:切换新创建的 DIV -> 链接到 $(this) 而不是 $(this).closest()

Question

我在评论部分有一个名为“回复”的链接。点击链接时，会弹出评论框。如果我重新单击“回复”按钮，我希望此评论框(以及所有其他评论框)消失。目前它并没有消失，并且不断打开更多评论框。

$('.replylink').click(function(event){ // Create comment box after clicking reply
event.stopPropagation();
var commentBox = $('<div class="comment-box"></div>');
$(this).closest('div').after(commentBox);
});

我用toggle()尝试了几件事，但如果我这样做了

$($(this).closest('div').after(commentBox)).toggle();

例如，它将切换“回复”链接。这样回复链接就会消失，评论框就会出现。我不明白如何仅切换评论框。有人可以帮助菜鸟吗？谢谢!

Answer 1

下面的代码将打开一个.comment-box(如果它不存在)，如果单个线程确实存在，则将其删除。

我已经在您的 .closest() 函数中添加了一个类，如果您只是查找 div 那么它的范围相当广泛!如果您添加一个类，您会发现它更好 - 例如，您可以在回复链接和包装器之间添加多个 div 和包装器。您现在可能不需要这样做......但将来您可能需要这样做!这意味着您的代码更加面向 future 。

我已经评论了下面的代码。它适用于单个页面上的多个线程/评论部分，但也适用于单个评论区域。

我还将评论框附加到回复链接的 .before() 而不是 .after()...从 UI Angular 来看，这感觉更自然，但显然是纯粹的风格变化。

<小时/>

演示

// Create comment box after clicking reply
$('.replylink').click(function(event) {

  // Stop default action for click (i.e. going to top of page)
  event.preventDefault();

  // Set wrapping thread div
  // this lets you have multiple threads on the same page (if needed)
  thread = $(this).closest("div.thread");

  // Check if thread has an opened comment box
  if (thread.find(".comment-box").length > 0) {

    // Delete any comment-box within this comment thread
    thread.find(".comment-box").remove();


  } else {

    // Uncomment the line below if you want to close all other comment boxes
    // $(".comment-box").remove();

    // Create a coment box if it doesn't exist
    var commentBox = $('<div class="comment-box"></div>');
    $(this).before(commentBox);

  }

});

.comment-box {
  height: 20px;
  padding: 10px;
  border: 1px solid blue;
  margin-bottom: 10px;
}

.thread {
  border: 1px black solid;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thread">
  <h3>Thread One</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Two</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Three</h3>
  <a href="#" class="replylink">Reply</a>
</div>