jquery - Jquery hide class show individual div

Question

I have a list of divs that are dynamically generated and looks like the following

<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>

Now after I dynamically generate all my div's of class foo I do the following

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

Which obviously hides all the div's like I'd expect. However, what I'd like is the ability to click on a link above the div that allows you to unhide that individual div.

Now normally for a class I know I'd just go $('.Foo').show(); and they would ALL show.

However, doing the following does not work.

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

Is this something that is allowed by jQuery to hide everything and then show individual items? Or am I going about this wrong?

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();
});