简化隐藏显示Jquery

Question

我总是以一种特殊的方式编写隐藏和显示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, #websites, #digital, #motion, #photography").removeClass("active");
    $(".websites, .digital, .motion, .photography").hide();
  });


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

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

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

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

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

我引用了这里的代码https://codepen.io/3be894d6-0f8e-489a-ae28-476df53bc557/pen/QXdjVJ。

Answer 1

要执行所需的操作，可以使用公共类按行为对元素进行分组。然后，您可以向所有这些元素添加单个事件处理程序。在该事件处理程序中，您可以通过使用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>

​