Javascript JQuery：切换新创建的DIV->；链接到$（this）而不是$（this）.closest（）

我在评论部分有一个名为“回复”的链接。单击链接时，将弹出一个注释框。如果我重新点击“回复”按钮，我希望这个（和所有其他评论框）消失。目前，它并没有消失，并不断打开更多的评论框

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

---

例如，它将切换“回复”链接。因此回复链接消失，评论框出现。我不明白如何只切换评论框。有谁能帮助一个疯子吗？thnx

下面的代码将打开一个

.comment框，如果它不存在，则将其删除（如果单个线程存在）

我已经在你的
.closest（）
函数中添加了一个类，如果你只是寻找一个
div
，那么它就相当广泛了！如果您添加了一个类，您会发现它更好——例如，您可以在回复链接和包装器之间添加多个div和包装器。你可能不需要现在就做。。。但你将来可能会！这意味着您的代码更适合未来

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

我还将注释框附加到回复链接的
.before（）
，而不是
.after（）
。。。从用户界面的角度来看，它感觉更自然，但显然是一种纯粹的风格变化


演示

//单击“回复”后创建注释框
$（'.replylink'）。单击（函数（事件）{
//单击时停止默认操作（即转到页面顶部）
event.preventDefault（）；
//设置缠绕螺纹div
//这允许您在同一页面上有多个线程（如果需要）
线程=$（this）.closest（“div.thread”）；
//检查线程是否有打开的注释框
if（thread.find（“.comment box”）.length>0）{
//删除此评论线程中的任何评论框
thread.find（“.comment box”）.remove（）；
}否则{
//如果要关闭所有其他注释框，请取消注释下面的行
//$（“.comment box”）.remove（）；
//如果不存在，请创建一个coment框
var commentBox=$（''）；
$（此）.before（注释框）；
}
});
。注释框{
高度：20px；
填充：10px；
边框：1px纯蓝色；
边缘底部：10px；
}
.线程{
边框：1px黑色实心；
填充：10px；
}

一号线
线二
螺纹三
如果不存在，下面的代码将打开一个
注释框
，如果个别线程存在，则将其删除

我已经在你的
.closest（）
函数中添加了一个类，如果你只是寻找一个
div
，那么它就相当广泛了！如果您添加了一个类，您会发现它更好——例如，您可以在回复链接和包装器之间添加多个div和包装器。你可能不需要现在就做。。。但你将来可能会！这意味着您的代码更适合未来

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

我还将注释框附加到回复链接的
.before（）
，而不是
.after（）
。。。从用户界面的角度来看，它感觉更自然，但显然是一种纯粹的风格变化


演示

//单击“回复”后创建注释框
$（'.replylink'）。单击（函数（事件）{
//单击时停止默认操作（即转到页面顶部）
event.preventDefault（）；
//设置缠绕螺纹div
//这允许您在同一页面上有多个线程（如果需要）
线程=$（this）.closest（“div.thread”）；
//检查线程是否有打开的注释框
if（thread.find（“.comment box”）.length>0）{
//删除此评论线程中的任何评论框
thread.find（“.comment box”）.remove（）；
}否则{
//如果要关闭所有其他注释框，请取消注释下面的行
//$（“.comment box”）.remove（）；
//如果不存在，请创建一个coment框
var commentBox=$（''）；
$（此）.before（注释框）；
}
});
。注释框{
高度：20px；
填充：10px；
边框：1px纯蓝色；
边缘底部：10px；
}
.线程{
边框：1px黑色实心；
填充：10px；
}

一号线
线二
螺纹三
是否要删除注释框？或者干脆把它藏起来？@OliverTrampleasure我猜是删除了，就像我创建了div一样。你想删除评论框吗？或者干脆把它藏起来？@OlivertRamplesure我想是移除了，就像我创造了这个div一样棒！非常感谢您快速正确的输入，非常感谢。不用担心，很高兴它能帮助您回答更多问题。在您的代码片段示例中，是否可能只打开一个注释框，因此如果我在“线程一”上打开一个注释框，并单击“线程3”上的回复链接，它将在那里打开并关闭“线程一”上的注释框？
$（“.comment box”）.remove（）
将删除所有注释框，只需在创建新注释框之前将其放入即可。我在我的代码中添加了一行注释，以显示它应该去哪里。这很简单。谢谢你，祝你今天愉快：）太棒了！非常感谢您快速正确的输入，非常感谢。不用担心，很高兴它能帮助您回答更多问题。在您的代码片段示例中，是否可能只打开一个注释框，因此如果我在“线程一”上打开一个注释框，并单击“线程3”上的回复链接，它将在那里打开并关闭“线程一”上的注释框？
$（“.comment box”）.remove（）
将删除所有注释框，只需在创建新注释框之前将其放入即可。我在我的代码中添加了一行注释，以显示它应该去哪里。这很简单。谢谢你，祝你今天愉快：）
$($(this).closest('div').after(commentBox)).toggle();