Question

我有以下页面结构（超简化）：我可以有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();

但他们没有工作。第一个示例关闭/隐藏两个，第二个示例关闭“idle-variable”。

这里有什么想法吗？

Answer 1

尝试这样做

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

Answer 2

考虑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。

Answer 3

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

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

<强> jsFiddle example

隐藏上一个div onclick

3 个答案: