简化Hide Show Jquery

编程问答 2022-06-08

问题描述

我一直以某种特定的方式对隐藏和显示jQuery函数进行编码，但我认为我可以写得更好。

下面是一个过滤器，我可以在其中查看和隐藏投资组合中的不同图像。

HTML 

   <div class="filters">
            <a id="all" class="active"><label>All Projects</label></a>
            <a id="branding"><label>branding</label></a>
            <a id="websites"><label>Websites</label></a>
            <a id="digital"><label>Digital and Print</label></a>
            <a id="motion"><label>Motion Graphics</label></a>
            <a id="photography"><label>photography</label></a>
        </div>

JQUERY 

    $(document).ready(function() {
  $("#all").click(function() {
      $("#all").addClass("active");
      $("#branding,#websites,#digital,#motion,#photography").removeClass("active");
    $(".all").show();
  });

  $("#branding").click(function() {
    $(".branding").show();

      $("#branding").addClass("active");
      $("#all,#photography").removeClass("active");
    $(".websites,.digital,.motion,.photography").hide();
  });


  $("#websites").click(function() {
    $(".websites").show();

      $("#websites").addClass("active");
      $("#branding,#all,#photography").removeClass("active");
    $(".digital,.branding,.photography").hide();
  });

  $("#digital").click(function() {
    $(".digital").show();
      
      $("#digital").addClass("active");
      $("#branding,#photography").removeClass("active");
    $(".branding,.websites,.photography").hide();
  });

   $("#motion").click(function() {
    $(".motion").show();
      
      $("#motion").addClass("active");
      $("#branding,.photography").hide();
   });

    $("#photography").click(function() {
    $(".photography").show();
      
      $("#photography").addClass("active");
      $("#branding,#digital").removeClass("active");
    $(".branding,.websites").hide();
  });
});

我从此处的代码https://codepen.io/3be894d6-0f8e-489a-ae28-476df53bc557/pen/QXdjVJ中引用代码。

解决方法

要执行所需的操作，可以使用通用类按行为对元素进行分组。然后，您可以向所有这些元素添加单个事件处理程序。在该事件处理程序中，您可以使用data属性来控制行为，以控制单击元素时应显示的内容，如下所示：

jQuery($ => {
  $('.trigger').on('click',e => {
    e.preventDefault();
    let trigger = e.currentTarget;
    let target = trigger.dataset.target;
    if (target === '#all') {
      $('.trigger').removeClass('active');
      $('.content').add(trigger).addClass('active');
    } else {
      $('.content,.trigger').removeClass('active')
        .filter(target).add(trigger).addClass('active');
    }
  });
});
a.active { color: #C00; }
.content { display: none; }
.content.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <a href="#" class="trigger active" data-target="#all"><label>All Projects</label></a>
  <a href="#" class="trigger" data-target="#branding"><label>Branding</label></a>
  <a href="#" class="trigger" data-target="#websites"><label>Websites</label></a>
  <a href="#" class="trigger" data-target="#digital"><label>Digital and Print</label></a>
  <a href="#" class="trigger" data-target="#motion"><label>Motion Graphics</label></a>
  <a href="#" class="trigger" data-target="#photography"><label>Photography</label></a>
</div>

<div class="content active" id="branding">Branding</div>
<div class="content active" id="websites">Websites</div>
<div class="content active" id="digital">Digital</div>
<div class="content active" id="motion">Motion</div>
<div class="content active" id="photography">Photography</div>

hidehtmljqueryshow