Question

故事

我们有一个父母（div）。父母可以有n个孩子。父可以拥有的子节点数由PHP变量$result = $this->Transaction->find('all', array( 'conditions' => [ 'Transactions.house_id' => $houseId] ))->join([ [ 'alias' => 'PluTransaction', 'table' => 'plu_transactions', 'type' => 'LEFT', 'conditions' => 'PluTransaction.transaction_id = Transactions.id' ] ])->select(['Transactions.id', '(Transactions.amount * PluTransaction.item_quantity) AS TOTAL', ]);决定。

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

$bigF

在此示例中，父级有3个子级（div），它们名为child1，child2，child3。 IDK为孩子命名。这是不好的养育方式。关于这部家庭剧的奇怪之处在于每个孩子都有2个孩子（div）。他们有奇怪的名字，如孙子1A，孙子1B，孙子等等......

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

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

这就是他们的工作方式。

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

但每次他们打电话给孩子时，都会发生奇怪的事情。有时孩子和孩子孙子们走到了一起。还有一些时候，大孩子们失踪了。

他们也尝试了另一种方式，例如：

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

并且一无所获。

这是证明。 Fiddle

任何人都可以帮我调查这个故事吗？我提供谢谢作为回报。：）

Answer 1

守卫们正在用这条线遮住孙子孙女：

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

因为孙子是父母中的div。您需要使用>：

将该操作应用于父级的直接子级

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

Answer 2

这是一个很好的故事，但有点令人困惑:) 如果您的目标是使用data-count属性切换子孙，请尝试以下方法：

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

在此处找到更新的fiddle。

Answer 3

伟大的叙述，哈特夫。

我稍微修改了一下代码。请看一下。

 $(".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>

Answer 4

另一个有效的解决方案：

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

我来到这个解决方案，因为$("#parent div:visible").hide();也隐藏了儿童元素，所以我添加了$('#'+calling+" div").css("display","block");来展示各自的孩子。

--Working DEMO--

Answer 5

在你的小提琴中只更新$（＆＃34; #parent div：visible＆＃34;）。hide（）; to $（＆＃34; #parent＆gt; div：visible＆＃34;）。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");
});

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

5 个答案: