как показать конкретный контейнер при нажатии кнопки с помощью jquery

#javascript #jquery

Вопрос:

Я пытаюсь отобразить контейнер со всем его содержимым, основываясь на том, какую кнопку нажимает пользователь. У меня есть следующий код , но он не работает ? Я разместил jquery в тегах сценариев на html-странице.

 $(document).ready(function() {
  $('#data1').click(function() {
    $('.all_info').show();
    $('.charts1').hide();
  });
  
  $('#data2').click(function() {
    $('.charts1').show();
    $('.all_info').hide();
  });
}); 
 .all_info {
  display: none;
}

.charts1 {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  <center>Results</center>
</h1>
<div class="data_btns_container">
  <div class="data_btns_group">
    <button type="button" class="data_btns_inside" id="data1">Data1</button>
    <button type="button" class="data_btns_inside" id="data2">Data2</button>
    <button type="button" class="data_btns_inside" id="data3">Data2</button>
  </div>
</div>
<div class="container-fluid all_info">
  <p>Test123</p>
</div>
<div class="container-fluid charts1">
  <canvas id="myChart" width="400" height="400"></canvas>
</div> 

Комментарии:

1. Я взял код, который вы добавили в вопрос, и вставил его в исполняемый фрагмент, где он работает правильно. Пожалуйста, проверьте консоль на наличие ошибок в вашей локальной версии и убедитесь, что вы добавили необходимые библиотеки, такие как jQuery.js, на страницу правильно.

2. Я запустил ваш код, и все работает. Но обратите внимание, что charts1 в классе нет никакого контента!

3. Я также протестировал ваш код, он работает. Ваш холст пуст, может быть, это вас смущает

Ответ №1:

Я не уверен, что именно вы ищете, но я написал что-то совершенно другое, но с похожим результатом, просто чтобы дать вам представление о том, чего, по моему мнению, вы хотите и как вы можете этого достичь. Взгляните на это и дайте мне знать.

 //When a button is clicked
$('button').on('click',function(){
  //we get the name of the div that matches the data attribute of the button
  var div = $(this).data('name');
  //if that div is visible, we hide it
  if($('.' div).hasClass('view-div')){
    $('.default').removeClass('view-div');  
  }else{
    //if the div was not visible we hide any div that might be and show this one
    $('.default').removeClass('view-div');
    $('.' div).addClass('view-div');
  }
}); 
 .default {
  border: 2px solid;
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 15px;
  display: none;
}

.view-div {
  display: block !important;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<div>
  <button data-name="div-1">Button 1</button>
  <button data-name="div-2">Button 2</button>
</div>

<div class="div-1 default">
  <h4>Div 1 Content</h4>
  <span>Some More!</span>
</div>
<div class="div-2 default">
  <h4>Div 2 Content</h4>
  <span>More Content</span>
</div> 

Дайте мне знать, если у вас возникнут какие-либо вопросы. Счастливого кодирования!

Ответ №2:

Я должен был упомянуть, что использую Django и у меня есть ‘main.js» файл внутри моего проекта, который изменяет элементы в контейнере «all_info», поэтому вместо того, чтобы помещать код jquery в тег сценария на моей html-странице, я должен был поместить его в » main.js-чтобы это сработало. В любом случае, спасибо за помощь.