Errore in clandestinità/div mostrando utilizzando jQuery

Question

La storia

Abbiamo un genitore (div). Il genitore può avere n figli. Il numero di figli che il genitore può avere è deciso da una variabile PHP $bigF.

Quindi, se $bigF è 5, il genitore ha 5 figli. Se è 10, allora è 10. Ma $bigF non ha alcun ruolo in questo contesto perché una volta caricata la pagina, il genitore avrà n figli. Non è dinamico, lo sai, è quello che stavo cercando di dire.

<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 questo esempio, il genitore ha 3 figli (div) e sono denominati child1, child2, child3. IDK che nomina un bambino. È cattiva genitorialità. E la cosa folle di questo dramma familiare è che ogni bambino ha 2 figli (div). E hanno nomi bizzarri come grandchild1A, grandchild1B, grandchild2A e così via ....

Il genitore è piuttosto timido. Lei crede che solo 1 bambino dovrebbe essere mostrato al mondo esterno. Il resto dei messaggi viene tenuto nascosto, potrebbe essere nel seminterrato o qualcosa del genere. Ma lei ha questa grande regola scritta su tutta la sua faccia. Se CHIAMA UN BAMBINO, IL BAMBINO EI GRANDCHILDREN DEVONO VENIRE.

E ha impiegato 3 guardie, che rendono il suo lavoro facile. E sono Call Child 1, Call Child 2, Call Child 3.

Ed è così che fanno il loro lavoro.

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

Ma ogni volta che chiamano un bambino, accade qualcosa di bizzarro. A volte bambino & i nipoti si incontrano. E qualche altra volta, i bambini grandi sono scomparsi.

E hanno cercato un altro modo anche, come:

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

e tornarono con niente.

Ecco la prova. Fiddle

Qualcuno può aiutarmi a indagare su questa storia ??? Offro Grazie in cambio. :)

Answer 1

Le guardie si nascondono i nipoti con questa linea:

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

perché i nipoti sono div all'interno del genitore. È necessario applicare tale operazione solo i bambini immediati del genitore, utilizzando >:

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

Answer 2

E 'una bella storia, ma un po' di confusione :) Se il vostro obiettivo è quello di alternare i figli ei nipoti utilizzando i dati attributo-conto, prova questo:

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

Trova un aggiornamento fiddle qui.

Answer 3

Grande narrazione, Hatsoff.

Ho modificato il codice un po '. Per favore dai un'occhiata.

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

Un'altra soluzione di lavoro:

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

Sono venuto a questa soluzione perchè $("#parent div:visible").hide(); anche nascondono elementi per bambini, così ho aggiunto $('#'+calling+" div").css("display","block"); per mostrare rispettivi figli anche.

--Working DEMO--

Answer 5

In te violino solo updat $ ("# genitore div: visibile") nascondere();. a $ ("# 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"); 
});