Question

我试图通过点击不同的div来切换div。两个div共享的唯一关系是它们在同一个div中。我有一个DIV class comment，其中包含DIV class button，点击时应该切换DIV class box。 box DIV也位于comment DIV内。我正在尝试使用jQuery(this).find(".box").toggle();，但它无效。我用$( ".button" ).click(function()触发它。该剧本目前位于我的身体底部。

有谁能请告诉我，我在这里做错了什么？我一直在玩这个功能一段时间，但没有运气。提前感谢您的回复。

JSFIDDLE here

HTML

<div class="comment">
    <div class="button">
        show/hide .box with text1
    </div>

    <div class="box">
        text 1
    </div>
</div>

<div class="comment">
    <div class="button">
        show/hide .box with text2
    </div>

    <div class="box">
        text 2
    </div>
<div>

的jQuery

$( ".button" ).click(function() {
    jQuery(this).find(".box").toggle();
});

Answer 1

简而言之，改变：

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

以下行的 ONE ：

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

完整说明：

它无法工作的原因是由于通话。让我们打破你的电话，看看它究竟在做什么。

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

$( ".button" )

接下来，您将分配一个事件。在这种情况下，该事件为click，这意味着每次div时，您都会告诉button让clicked班级做某事。但请记住，不包括回调函数也是trigger此事件的简单方法。

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

现在下一行就是mistake发生的地方。

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

第一个错误是在您使用jQuery.之后使用$。noconflict。如果使用jQuery的$，则只需使用细长名称，因为您包含的另一个JS库可能使用$('.button')。换句话说，如果jQuery.有效并且在使用时是jQuery对象，那么您不需要使用jQuery(this)。详细了解此here。

现在，除此之外，我们可以将$(this)视为callback。每当您在事件的$(this)方法中使用$(this)时，您指的是 该事件所绑定的元素 。这意味着您的函数中的$('.button')引用box。这里的问题是您希望它找到包含类.box的内部元素。根据您的HTML，这是不可能的，因为.button是兄弟，它不在.box的内部 HTML中。因此，您需要先进行不同的通话才能找到parent。

这里实际上有几个解决方案。没有一个解决方案比另一个解决方案更“正确”，只是简单地不同并且可能导致不同的“时间”运行。现在我选择了最简单的东西，因为它让你可以控制包含此函数所有相关元素的$(this).closest('.comment')元素。我会在一分钟内讨论可能的替代方案。

.button:clicked

上述行只是告诉.comment查找包含类$('.button').click(function(e) { var container = $(this).closest('.comment');的第一个父元素。换句话说，这将找不到任何孩子或兄弟姐妹，它只会从当前元素上升。这允许我们抓住包含所有相关元素和信息的块，从而根据需要进行操作。因此，在将来，您甚至可以将其用作函数中的变量，例如：

find

现在你可以find这个元素块中的任何内容。在这种情况下，您需要toggle框和$(this).closest('.comment').find(".box").toggle(); // Or with our variable I showed you container.find(".box").toggle();它。因此：

.box

现在，基于您的HTML布局有很多替代方案。即使.comment被隐藏在.button内的更多元素中，我给出的这个示例也会很好，但是，鉴于您确切的HTML，我们看到.box和$(this).siblings(".box").toggle();是siblings。这意味着您可以使此调用完全不同，并使用以下内容获得相同的结果：

button

这将允许我们当前点击并选中的box元素查找包含课程.click的ANY和所有siblings。如果您的HTML非常简单，这是一个很好的解决方案。

然而，很多时候，对于“评论”类型设置，我们的HTML不是那么简单，也不是static。通常在页面加载后加载。这意味着我们$(document).on('click', '.button', function(e) { $(this).siblings('.box').toggle(); });的一般分配将不起作用。鉴于您的确切HTML并且不知道静态父 ID ，我可能会将您的代码编写为：

click event

这样做允许将.button分配给包含document的任何元素，无论是加载页面还是页面启动后十分钟。但是，这里经常看到的警告是赋值放在document上。如果我们将大量事件分配给static，它可能会变得非常复杂并且可能会降低客户端浏览器的速度。更不用说这可能导致所有其他令人头痛的问题。所以这是我的建议，创建一个dynamic assignment（加载页面，是页面主HTML的一部分）加载区域，然后执行<div id"Comments"></div>。例如：

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

然后你可以这样做：

.on

如果您还有其他问题，请发表评论！

Side Note .live适用于jQuery版本1.7+。如果使用较旧的jQuery，请使用.bind或{{1}}

Answer 2

您可以使用jQuery选择器.siblings()重写您的函数，如下所示：

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

这是一个有效的fiddle来演示。

Answer 3

你真正需要做的就是：

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

如何在不同的div上点击一个div？

HTML

的jQuery

3 个答案:

完整说明：