我有一组按钮,单击每个按钮,它将显示相应的div并隐藏所有其他同级项。我绝对是jquery的初学者,所以我找到了一个解决方案,但是兄弟div不会隐藏。也可以通过if/else完成吗?
$('#showMcq, #showOe, #showLt, #showAs').click(function() {
$(this).parents('.course-design-custom').addClass('d-none');
});
$('#showMcq').click(function() {
$('#McqView').removeClass('d-none');
});
$('#showOe').click(function() {
$('#OeView').removeClass('d-none');
});
$('#showAs').click(function() {
$('#AssessmentView').removeClass('d-none');
});
$('#showLt').click(function() {
$('#LearningTaskView').removeClass('d-none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showMcq">MCQ</button>
<button id="showOe">Open Ended</button>
<button id="showLt">Learning Task</button>
<button id="showAs">Assessment</button>
<div class="container">
<div class="row course-design-custom" id="McqView">
MCQ
</div>
<div class="row course-design-custom d-none" id="OeView">
Open Ended
</div>
<div class="row course-design-custom d-none" id="LearningTaskView">
Learning Task
</div>
<div class="row course-design-custom d-none" id="AssessmentView">
Assessment
</div>
</div>
