Zawsze kodowałem moją skórę i pokaż funkcje jQuery w określony sposób, ale myślę, że mógłbym ich lepiej napisać.

Poniżej znajduje się filtr, w którym przeglądam i ukrywam różne obrazy w portfolio.

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

Odwołuję kod stąd Kodaj https://codepen.io/3be894d6 -0F8E-489A-AE28-476DF53BC557 / PEN / QXDJVJ.

2
Alex Lorimer 17 październik 2020, 18:23

1 odpowiedź

Najlepsza odpowiedź

Aby zrobić to, czego potrzebujesz, możesz użyć wspólnych klas do grupowania elementów według zachowania. Następnie możesz dodać pojedynczą obsługę zdarzeń do wszystkich tych elementów. W ramach tą obsługiwaniem zdarzeń można rozdzielić zachowanie za pomocą atrybutu data do sterowania treścią, która powinna być wyświetlana, gdy elementy są kliknięte, coś takiego:

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>
2
Rory McCrossan 17 październik 2020, 15:30