jquery -无法使用函数显示所需的内容
jquery -无法使用函数显示所需的内容
提问于 2018-02-13 16:13:50
我有一个我不完全理解的jQuery脚本。我想知道为什么我不能用class或id替换同级(‘div’)？我觉得我的代码不能正常工作。我想做的是用按钮点击替换一些内容，然后用第二个函数替换第二个内容。所有的课程都会被院系取代，但院系不会被院系取代，当我按下一个系的时候，它们都显示在另一个院系下面。
$(document).ready(function() {
$('.btnClick').on('click', function() {
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function() {
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<h4>Search courses</h4>
<hr>
<br>
<ul>
<li class="btnClick" id="fac_1">Faculty of Mathematics and Informatics</li>
<ul>
<li class="btnClick2" id="dep_1">Mathematics and Informatics</li>
<ul>
<li>Informatics</li>
<li>Mathematics</li>
</ul>
</ul>
<li class="btnClick" id="fac_2">Faculty of Medicine</li>
<ul>
<li class="btnClick2" id="dep_2">Medicine</li>
<ul>
<li>Medical Sciences</li>
</ul>
</ul>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="jumbotron">
<div>
<h3>All courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
<div id="fac_1_tab" style="display:none;">
<h3> Faculty of Mathematics and Informatics courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
</ul>
</div>
<div id="fac_2_tab" style="display:none;">
<h3> Faculty of Medicine courses</h3>
<ul>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
<ul>
<div id="dep_1_tab" style="display:none;">
<h3>Department of Mathematics and Informatics courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
</ul>
</div>
</ul>
<ul>
<div id="dep_2_tab" style="display:none;">
<h3>Department of Medicine courses</h3>
<ul>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
这也是django的完整代码，如果有帮助的话：https://pastebin.com/y9tHNbax
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-13 16:46:30
我不确定我是否完全理解你的问题，但你可以试试这个
$(document).ready(function () {
$('.btnClick').on('click', function () {
$('.col-md-9').find('[id^="dep"]').hide()
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
$('.col-md-9').find('[id^="fac"]').hide()
$('.col-md-9').find('[id^="dep"]').hide()
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});Stack Overflow用户
发布于 2018-02-13 16:50:27
部门不能互相替换，因为他们不是兄弟。它们存在不同的ul。如果所有部门都是相同ul，则它可以正常工作
检查一下。它可以根据您的需要工作
$(document).ready(function () {
$('.btnClick').on('click', function () {
$('.col-md-9').find('[id^="dep"]').hide()
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
var department_id = $(this).attr('id');
$('#fac_' + department_id.split('_')[1] + '_tab').show().siblings('div').hide();
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48762215
复制相关文章
相似问题
腾讯云开发者
