Nandita Sharma的社区主页

修改此函数

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  $(".course-design-custom").addClass('d-none');
});

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  $(".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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<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>

更好的方法

在按钮上保留一个数据id,并使用该id来定位要在其单击时显示的元素。

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  $(".course-design-custom").addClass('d-none');
  var dataId = $(this).attr("id");
  $(".container").find("[data-id='" + dataId + "']").removeClass('d-none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<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" data-id="showMcq">
    MCQ
  </div>
  <div class="row course-design-custom d-none" id="OeView" data-id="showOe">
    Open Ended
  </div>
  <div class="row course-design-custom d-none" id="LearningTaskView" data-id="showLt">
    Learning Task
  </div>
  <div class="row course-design-custom d-none" id="AssessmentView" data-id="showAs">
    Assessment
  </div>
</div>