#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-чтобы это сработало. В любом случае, спасибо за помощь.