Geek Answers Handbook

Error hiding / showing div using jQuery

Story

We have a parent (div). A parent can have n children. The number of children a parent can have is determined by the PHP variable $bigF .

So, if $bigF is 5, then the parent has 5 children. If it's 10, then it's 10. But $bigF has no role in this context, because as soon as the page is loaded, the parent will have n children. You know, it’s not dynamic what I tried to say.

 <div id="parent"> <div id="child1" class="click" style="display:block"> Child1 <div id="grandchild1A"> grand child 1A </div> <div id="grandchild1B"> grand child 1B </div> </div> <div id="child2" class="click" style="display:none"> Child2 <div id="grandchild2A"> grand child 2A </div> <div id="grandchild2B"> grand child 2B </div> </div> <div id="child3" class="click" style="display:none"> Child3 <div id="grandchild3A"> grand child 3A </div> <div id="grandchild3B"> grand child 3B </div> </div> </div> <br><br><br> Calling children down <br><br> <div class="callchild" data-count="child1"> Call Child 1</div> <div class="callchild" data-count="child2"> Call Child 2</div> <div class="callchild" data-count="child3"> Call Child 3</div>

In this example, the parent has 3 children (div), and they are called child1, child2, child3. IDK that calls the baby. This is a bad upbringing. And the fallacy in this family drama is that each child has 2 children (div). And they have such strange names as grandchild1A, grandchild1B, grandchild2A, etc ...

The parent is a little shy. She believes that in the outside world only one child should be shown . The rest are hidden , may be in the basement or something like that. But she has this BIG rule written on her face. IF I CHALLENGE THE CHILD, THE CHILD AND GRANGILLS MUST ACCEPT.

And she hired 3 guards to facilitate her work. And they are Call Child 1, Call Child 2, Call Child 3.

And this is how they do their job.

 <script> $(".callchild").on('click',function() { //var calling = $('div:visible').last().attr('id'); //alert(calling); var calling = $(this).attr('data-count'); $("#parent div:visible").hide(); $('#'+calling).css("display","block"); }); </script>

But every time they call a child, something strange happens. Sometimes a child and grandchildren get together. And another time, great children went missing.

And they tried another way, for example:

 var calling = $('div:visible').last().attr('id');

and returns nothing.

Here is the proof. Fiddle

Can someone help me investigate this story ??? I suggest Thank you in return. :)

+7
javascript jquery html
source share
5 answers

The guards hide their grandchildren with this line:

 $("#parent div:visible").hide();

because grandchildren are divs inside a parent. You need to apply this operation only to the immediate children of the parent using > :

 $("#parent > div:visible").hide();
+3
source share

This is a good story, but a bit confusing :) If your goal is to switch children and grandchildren using the data-count attribute, try the following:

 $(".callchild").on('click',function(){ var calling = $(this).attr('data-count'); $("#parent > div").hide(); $('#'+calling).css("display","block"); });

Find an updated fiddle here.

+2
source share

Great story, Hatsoff.

I changed the code a bit. Please take a look at this.

  $(".callchild").click(function() { var calling = $(this).attr('data-count'); $('.click').hide(); $('#'+calling).show(); }); 
 .callchild{ background:aqua; width:100px; height:15px; border-radius:15px; padding:15px; margin:15px; cursor:pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div id="parent"> <div id="child1" class="click" style="display:block"> Child1 <div id="grandchild1A"> grand child 1A </div> <div id="grandchild1B"> grand child 1B </div> </div> <div id="child2" class="click" style="display:none"> Child2 <div id="grandchild2A"> grand child 2A </div> <div id="grandchild2B"> grand child 2B </div> </div> <div id="child3" class="click" style="display:none"> Child3 <div id="grandchild3A"> grand child 3A </div> <div id="grandchild3B"> grand child 3B </div> </div> </div> <br><br><br> Calling children down <br><br> <div class="callchild" data-count="child1"> Call Child 1</div> <div class="callchild" data-count="child2"> Call Child 2</div> <div class="callchild" data-count="child3"> Call Child 3</div>
+2
source share

Another working solution:

 $(".callchild").on('click',function() { var calling = $(this).attr('data-count'); $("#parent div:visible").hide(); $('#'+calling).css("display","block"); $('#'+calling+" div").css("display","block"); });

I came to this solution because $("#parent div:visible").hide(); also hid the children, so I added $('#'+calling+" div").css("display","block"); to show matching children.

- Worker DEMO -

+1
source share

In the game, you simply update $ ("# parent div: visible"). hide (); to $ ("# parent> div: visible"). hide ();

 $(".callchild").on('click',function() { //var calling = $('div:visible').last().attr('id'); //alert(calling); var calling = $(this).attr('data-count'); $("#parent > div:visible").hide(); $('#'+calling).css("display","block"); });
0
source share

More articles:


All Articles