隐藏上一个 div onclick答案

【问题标题】：Hide previous div onclick隐藏上一个 div onclick
【发布时间】：2014-02-28 19:57:33
【问题描述】：

我有以下页面结构（超级简化）：我可以有 X（动态）个空闲变量。

<div class="idle-variable">
<div class="var-container">content</div>
<a href="#">Save</a>
</div>
<div class="idle-variable">
<div class="var-container">content</div>
<a href="#">Save</a>
</div>

我的问题：
当我在“idle-variable”的第二个实例中单击保存时，我想隐藏前一个 DIV 集的“var-container”。同样，在任何给定时间都可以有多个空闲变量 div。每次单击保存按钮时，它都应该关闭/隐藏前一个 div 集的“var-container”。

我试过了：

$(".var-container").hide()

$(".var-container").prev().hide();

但他们不工作。第一个示例关闭/隐藏两者，第二个示例将关闭“空闲变量”。

这里有什么想法吗？

【问题讨论】：

当您说“上一个 div 集”时，您是指包含单击的“保存”链接的 .idle-variable div 吗？因为你描述它的方式听起来就像你在谈论以前的.idle-variable。
我重新阅读了这篇文章，并决定删除我点赞的帖子。真的不清楚要问什么。我认为没有任何答案（在我发布此评论时）是基于 OP 更正的。听起来保存按钮应该隐藏它之前的保存按钮的内容（这对我来说没有任何意义）。
@Jay 当我点击第二个保存链接时，我想在第一个空闲变量 div 中隐藏 var-container div。基本上，这最终要做的是当我开始与第二个空闲变量 div 交互时，我希望隐藏第一个，但只有 var-container 部分。最后，因为可以有 3、4、5 个不同的空闲变量 div，所以在单击保存链接时，应始终将 var-container 隐藏在其上方设置的 div 中。
@Steve 为了简化事情，当我点击第二个保存实例时，我希望发生这样的事情<div class="idle-variable"><div class="var-container" style="display: none;">content</div><a href="#">Save</a></div><div class="idle-variable"><div class="var-container">content</div><a href="#">Save</a></div>。（注意显示无）
@user2828701 所以你想隐藏 var-container，而不是保存链接？如果是这样，请参阅下面我编辑的答案。

标签： javascript jquery

【解决方案1】：

尝试这样做

$('a').on('click', function() {
    $(this).prev().toggle();
});

【讨论】：

【解决方案2】：

如果您想在单击保存按钮之前隐藏内容 div，请使用：

$('div.idle-variable a').click(function(){
    $(this).prev().hide();
})

jsFiddle example

【讨论】：

【解决方案3】：

考虑 HTML：

<div class="idle-variable">
    <div class="var-container">content 1</div>
    <a href="#">Save</a>
</div>

<div class="idle-variable">
    <div class="var-container">content 2</div>
    <a href="#">Save</a>
</div>

<div class="idle-variable">
    <div class="var-container">content 3</div>
    <a href="#">Save</a>
</div>

您可以使用jQuery代码在链接前隐藏.var-container div：

$('a').click(function (e) {
    $(this).prev('.var-container').hide();
});

你可以测试这个here。

【讨论】：

你就在那里......如果我点击“内容 2”下的保存按钮会隐藏“内容 1”，有什么想法吗？或者如果我点击内容 3 下的保存，它会隐藏内容 2？
您想要这样，如果您点击 content2 上的“保存”，它会隐藏内容 1？
感谢您的支持，史蒂夫。您的回答非常接近，并引导我找到解决方案。也许我描述的不够充分。最终我正在寻找这个：$(this).parent().prev().children(".var-container").hide(500);
哦，我以为你想隐藏整个 .idle 变量，而不仅仅是 .var 容器。无论如何，我很高兴你明白了。