Javascript 如何在不同的div上单击切换div？

我试图通过单击不同的div来切换一个div。两个div共享的唯一关系是它们位于同一个div内。我有一个

div class注释

，其中包含

div class按钮

，当单击该按钮时，应该切换

div class框

。

box

DIV也在

comment

DIV中。我正在尝试使用

jQuery（this.find（“.box”）.toggle（），但它不工作。我正在用
$（“.button”）触发它。单击（function（）
。脚本当前位于我的身体底部

有人能告诉我我做错了什么吗？我已经玩了一段时间了，但是一点运气都没有。提前谢谢你的回复


HTML
简言之，变革：

jQuery(this).find(".box").toggle();

到以下行中的一行：

$(this).parent('.comment').find(".box").toggle();
$(this).closest('.comment').find(".box").toggle();
$(this).siblings(".box").toggle();


详细说明：
它不工作的原因是因为电话。让我们分析一下你的电话，看看它到底在做什么

首先，我们看到一个简单的jQuery。这告诉jQuery查找包含类
按钮
的div。请记住，jQuery使用任何CSS选择器。因此，在jQuery中选择一个项就像使用它的CSS选择器一样简单

$( ".button" )

接下来，您将分配一个事件。在本例中，该事件是
单击
，这意味着您告诉
div
让class
按钮
在每次单击
时执行某项操作。但是，请记住，不包括回调函数也是触发该事件的一种简单方法

$( ".button" ).click(function() {

现在，下一行是发生
错误的地方

jQuery(this).find(".box").toggle();

第一个错误是使用了
jQuery。
在您已经使用了它的短符号之后，
$
。如果您使用的是jQuery的
noconflict
，您只需要使用拉长的名称，因为您包含的另一个JS库可能会使用
$
。换句话说，如果
$（'.button'））
可以工作，并且在使用时是jQuery对象，那么您就不需要使用
jQuery。
。有关这方面的详细信息，请参阅

现在，撇开这一点不谈，我们可以把
jQuery（this）
看作
$（this）
。每当您在事件的
回调方法中使用时，您指的是事件也绑定的元素。这意味着函数中的
$（this）
指的是
$（'.button'））
。这里的问题是，您希望它找到一个内部元素，该元素包含类
box
。根据您的HTML，这是不可能发生的，因为
。box
是一个兄弟，它不在
.button
的内部HTML中。因此，您需要进行不同的调用才能找到它
.box

这里实际上有几种解决方案。没有一种解决方案比另一种解决方案更“正确”，只是简单地不同，并且可能导致不同的“时间”现在，我使用了我认为最简单的方法，它让您可以控制
父元素
元素，该元素包含该函数的所有相关元素。我将在一分钟内讨论可能的替代方法

$(this).closest('.comment')

上面的一行只是告诉
。按钮：单击
以查找包含类
.comment
的第一个父元素。换句话说，这不会找到任何子元素或同级元素，它只会从当前元素向上移动。这允许我们抓取包含所有相关元素和信息的块，从而创建人因此，将来，您甚至可以将其用作函数中的变量，例如：

$('.button').click(function(e) {
    var container = $(this).closest('.comment');

现在，您可以
查找该元素块中的任何内容。在这种情况下，您需要
查找
框并
切换
它。因此：

$(this).closest('.comment').find(".box").toggle();
//  Or with our variable I showed you
container.find(".box").toggle();

现在，基于您的HTML布局有很多选择。我给出的这个示例很好，即使
.box
被埋在
.comment
中的更多元素中，但是，考虑到您的确切HTML，我们看到
.button
和
.box
是。这意味着您可以使这个调用完全不同d使用以下方法获得相同的结果：

$(this).siblings(".box").toggle();

这将允许我们当前单击并选择的
按钮
元素查找所有具有类
框
的元素。如果您的HTML那么简单，这是一个很好的解决方案，而且很简单

然而，很多时候，对于“注释”类型的设置，我们的HTML不是那么简单，也不是。它通常是在页面加载之后加载的。这意味着我们的
。单击
的一般分配将不起作用。鉴于您的确切HTML，并且不知道静态父ID，我可能会将您的代码编写为：

$(document).on('click', '.button', function(e) {
    $(this).siblings('.box').toggle();
});

这样做的目的是允许将此
单击事件
分配给包含类的
。按钮
的任何元素，无论是加载页面还是在页面打开后十分钟。然而，这里经常看到的警告是分配放在
文档
上。我们是否应该将大量事件分配给
文档
>这可能会变得非常复杂，可能会减慢客户端的浏览器速度。更不用说这可能会导致的所有其他问题。因此，我的建议是，创建一个
静态
（使用页面加载，是页面主HTML的一部分）加载区域，并对其执行
动态分配
。例如：

<div id"Comments"><!-- load comments --></div>

如果您还有任何问题，请发表评论

旁注
.on
适用于jQuery 1.7+版本。如果使用较旧的jQuery，请使用
.live
或
.bind

您可以使用jQuery选择器
.sibbines（）
像这样重新编写函数：

$( ".button" ).click(function() {
    $(this).siblings().toggle();
});

这里有一个工作示例。
您真正需要做的就是：

  $(this).parent().find(".box").toggle();

更新了答案，给出了比你想要的更多的解释，但应该让你完全了解正在发生的事情以及如何更好地利用这些信息
$('#Comments').on('click', '.button', function(e) {
    $(this).siblings('.box').toggle();
});

$( ".button" ).click(function() {
    $(this).siblings().toggle();
});

  $(this).parent().find(".box").toggle();