jQuery在单击按钮时显示各自

时间：2018-11-27 06:56:50

标签： javascript jquery html

我有一组按钮，单击每个按钮将显示相应的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>

8 个答案:

答案 0 :(得分：2)

您可以在attribute上添加一个button，以告诉它应使用的元素。

<button id="showAs" target="AssessmentView">Assessment</button>

然后您的jQuery可能看起来像：

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  var target = "#" + $(this).attr("target");

  var selected = $(target);
  selected.siblings().addClass("d-none");
  selected.removeClass("d-none");
});

工作演示 

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  var target = "#" + $(this).attr("target");

  var selected = $(target);
  selected.siblings().addClass("d-none");
  selected.removeClass("d-none");
});
.container .div {
  background-color: #efefef;
}

.d-none {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showMcq" target="McqView">MCQ</button>
<button id="showOe" target="OeView">Open Ended</button>
<button id="showLt" target="LearningTaskView">Learning Task</button>
<button id="showAs" target="AssessmentView">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>

答案 1 :(得分：1)

修改此功能

$('#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>

答案 2 :(得分：1)

您可以使用以下功能为div添加“ d-none”类，然后使用removeClass。 $（'＃showMcq，#showOe，#showLt，#showAs'）。click（function（）{   $（this）.parents（'。course-design-custom'）。addClass（'d-none'）; }）; $（'＃showMcq'）。click（function（）{   hidedivfirst（）;   $（'＃McqView'）。removeClass（'d-none'）; }）; $（'＃showOe'）。click（function（）{   hidedivfirst（）;   $（'＃OeView'）。removeClass（'d-none'）; }）; $（'＃showAs'）。click（function（）{   hidedivfirst（）;   $（'＃AssessmentView'）。removeClass（'d-none'）; }）; $（'＃showLt'）。click（function（）{   hidedivfirst（）;   $（'＃LearningTaskView'）。removeClass（'d-none'）; }）; 函数hidedivfirst（）{   $（'。row'）。addClass（'d-none'）; } .d-none {   显示：无； }
  
    MCQ   
  
    开放式   
  
    学习任务   
  
    评定   

答案 3 :(得分：1)

像这样更新您的html，脚本和css 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

        $(document).ready(function(){

            $("button").click(function(){
                var cls = $(this).attr("class");
                $(".course-design-custom").removeClass("active");
                $("#"+cls).addClass("active");
                return false;
            });

        });

</script>

<style>

    .course-design-custom{ display:none; }
    .course-design-custom.active{ display:block; }

</style>

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

答案 4 :(得分：1)

您还可以使用JQuery UI Tabs，它将为您处理所有事情，并且您不需要管理类，也不需要为此编写额外的JavaScript或jquery，只需遵循结构并使用方法$("#tabs").tabs();}); 

$( function() {
    $( "#tabs" ).tabs();
  } );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

答案 5 :(得分：1)

您可以使用数据属性来定位要在点击时显示的div。为了区分每个按钮在$（'＃showMcq，#showOe，#showLt，#showAs'）中的点击情况。click（function（）{}）; ，您可以使用$（this）.attr（'id'）;这将为您提供该功能中单击的按钮的ID。

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  $('.course-design-custom').addClass('d-none');
  var viewCourse = $(this).data('view');
  $('#'+viewCourse).removeClass('d-none');
});
.d-none{
  display:none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showMcq" data-view="McqView">MCQ</button>
<button id="showOe" data-view="OeView">Open Ended</button>
<button id="showLt" data-view="LearningTaskView">Learning Task</button>
<button id="showAs" data-view="AssessmentView">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>

答案 6 :(得分：1)

HTML 的结构建议您可以使用索引来隐藏/显示元素：

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  var idx = $('button').index(this);
  $('.course-design-custom').hide(); //hide all
  $('.course-design-custom').eq(idx).show(); //show only by matching the index 
});
.d-none{display: 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>

答案 7 :(得分：0)

.parent() API 

$(this).parents('.course-design-custom').addClass('d-none');

此功能使用方法有误，您可以这样尝试

$('.course-design-custom').addClass('d-none');

JSFiddle

相关问题
最新问题