Html 简化隐藏显示Jquery

我总是以特定的方式编写隐藏和显示jQuery函数，但我认为我可以编写得更好

下面是一个过滤器，我在其中查看和隐藏公文包中的不同图像

HTML

---

我从这里引用代码。

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

data

属性来控制单击元素时应显示的内容，从而分离行为，如下所示：

jQuery（$=>{
$（'.trigger'）。在（'click'，e=>{
e、 预防默认值（）；
让触发器=e.currentTarget；
让target=trigger.dataset.target；
如果（目标=='#全部'）{
$（'.trigger'）.removeClass（'active'）；
$（'.content'）.add（触发器）.addClass（'active'）；
}否则{
$（'.content.trigger'）.removeClass（'active'））
.filter（目标）.add（触发器）.addClass（'active'）；
}
});
});
a.active{color:#C00；}
.content{显示：无；}
.content.active{display:block；}

品牌创建
网站
数字的
动议
照片
jQuery代码中的类未在发布的html代码中定义。请输入正确的代码。@AryanBeezadhur在哪里？我在html postedi中没有看到这些类，我想他指的是.all、.branding和所有其他调用.Show（）的类。在codepen环境中，您有额外的html，但不在本例中，
jQuery（$=>{}）的作用是什么函数do？它是
jQuery（document）.ready（函数（$）{}）的ES6变体   <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>

    $(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();
  });
});