Question

我有一个动态生成的div列表，如下所示

<div class="Foo">
  <div class ="Bar" id ="Something{X}">  // Where {X} is a counter i.e "Something1" , "Something2"
  <p>some stuff</p>
  <form>
    <input />
  </form>
</div>

现在我动态生成了所有类foo的div后，我会执行以下操作

$('.Foo').hide();

这显然隐藏了所有div，就像我期望的那样。但是，我想要的是能够点击div上方的链接，允许你取消隐藏那个单独的div。

现在通常上课我知道我会去$（'。Foo'）。show（）;他们会全部展示。

但是，执行以下操作无效。

$("#Something1").show();

这是jQuery允许隐藏所有内容然后显示单个项目的东西吗？或者我错了吗？

Answer 1

您的问题是您隐藏了隐藏的父容器。

尝试隐藏“条形图”

$('.bar').hide();

然后$("something1").show()

Answer 2

您正在使用类foo隐藏父div;因此，你需要显示div。

$("#Something1").parent().show();

Answer 3

而不是：

$(".foo").hide();

应该是：

$(".bar").hide();

然后重新打开一个：

$("#Something1").show();

您正在隐藏父容器，然后尝试打开其中一个子容器，因此您无法看到它。

Answer 4

<p class="showlink">Link to show</p>
<div class="Foo">
  <div class ="Bar" id ="Something{X}">  // Where {X} is a counter i.e "Something1" , "Something2"
  <p>some stuff</p>
  <form>
    <input />
  </form>
</div>

JS

$(".showlink").on('click', function() {
    $(this).next('.Foo').show();
});

Jquery隐藏类显示个人div

4 个答案: