jQuery не работает после нажатия

Question

Я пытаюсь создать сценарий выбора центра обработки данных, который при щелчке изменит выбранный флаг, а также отобразит/спрячет два div с планами и прочим.

Однако, когда я добавляю $("#conteudoID").hide() к моему коду jQuery, он разбивает все (без этого, он правильно меняет цвет/выбран флаг).

этого скрипка с моим кодом: https://jsfiddle.net/rbaldasso/g5ax9nbn/2/

Код:

$("#conteudo2").hide(); 
 
$("#conteudo1").hide(); 
 

 
$('.childDiv').click(function() { 
 
    $(this) 
 
    .css('background-color', '#4f5154') 
 
    $("#conteudo2").hide() 
 
    $("#conteudo1").show() 
 
    .siblings(".childDiv") 
 
    .css('background-color', '#9c9c9c') 
 
    $("#conteudo2").show() 
 
    $("#conteudo1").hide(); 
 
});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Escolha um Data Center</h3> 
 
<div class="container" id="divParent1" class="parentDiv"> 
 
    <div class="childDiv fixed" id="child1"> 
 
    <img src="https://lipis.github.io/flag-icon-css/flags/4x3/br.svg" width="90px"> 
 
    <br>Brasil - São Paulo</div> 
 
    <div class="childDiv flex-item" id="child2"> 
 
    <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" width="90px"> 
 
    <br>Estados Unidos - Kansas</div> 
 
</div> 
 

 
<div id="conteudo1" class="conteudo"> 
 
    apareci br 
 
</div> 
 
<div id="conteudo2" class="conteudo"> 
 
    apareci eua 
 
</div>

Answer 1

Попробуйте это:

 $("#conteudo2").hide(); 
     $("#conteudo1").hide(); 

     $('#child1').click(function(){ 
      $(this) 
      .css('background-color','#4f5154') 
      .siblings(".childDiv") 
      .css('background-color','#9c9c9c'); 

      $("#conteudo1").show(); 
      $("#conteudo2").hide(); 
     }); 

     $('#child2').click(function(){ 
      $(this) 
      .css('background-color','#4f5154') 
      .siblings(".childDiv") 
      .css('background-color','#9c9c9c'); 

      $("#conteudo2").show(); 
      $("#conteudo1").hide(); 
     });