使用jQuery隐藏/显示div时出错

Question

故事

我们有一个父母(div).父母可以有n个孩子.父项可以拥有的子项数由PHP变量决定$bigF.

所以,如果$bigF是5,那么父母有5个孩子.如果它是10,那么它是10.但是$bigF在这个上下文中没有任何作用,因为一旦页面加载,父级将有n个子级.你知道,这不是动态的,而是我想说的.

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

在此示例中,父级有3个子级(div),它们名为child1,child2,child3.IDK为孩子命名.这是不好的养育方式.关于这部家庭剧的奇怪之处在于每个孩子都有2个孩子(div).他们有奇怪的名字,如grandchild1A,grandchild1B,grandchild2A等......

家长有点害羞.她认为只有一个孩子应该向外界展示.其余的人都被隐藏起来,可能在地下室或其他地方.但是她的脸上写着一条大规则. 如果我打电话给一个孩子,孩子和格兰德儿童应该来.

她雇佣了3名警卫 - 让她的工作轻松自如.他们是叫孩子1,叫孩子2,叫孩子3.

这就是他们的工作方式.

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

但每当他们给孩子打电话时,就会发生奇怪的事情.有时孩子和孙子们聚在一起.还有一些时候,大孩子们失踪了.

他们也尝试了另一种方式,比如:

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

没有任何回报.

这是证明.小提琴

任何人都可以帮我调查这个故事??? 我提供谢谢作为回报.:)

Answer 1

守卫们把孙子们藏了起来，并说出了这句话：

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

因为孙子是父级中的div。您需要将该操作仅应用于父级的直接子级，使用>：

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