Question

我不知道很多jQuery，我只知道CSS和HTML，但我猜测我需要做的事情很简单。

我在某处抓取了一个代码并对其进行了修改以制作类别过滤器这是我所做的事情的形象。

一切正常我唯一想做的是：当它首先加载时，只显示一个特定的类别......不是全部。

这是我抓住的原始代码：
（因为我有一些西班牙语和长svg路径不相关）

＆＃13;

(function($) {

  'use strict';

  var $filters = $('.filter [data-filter]'),
    $boxes = $('.boxes [data-category]');

  $filters.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    
    $filters.removeClass('active');
    $this.addClass('active');

    var $filterColor = $this.attr('data-filter');

    if ($filterColor == 'all') {
      $boxes.removeClass('is-animated')
        .fadeOut().finish().promise().done(function() {
          $boxes.each(function(i) {
            $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
          });
        });
    } else {
      $boxes.removeClass('is-animated')
        .fadeOut().finish().promise().done(function() {
          $boxes.filter('[data-category = "' + $filterColor + '"]').each(function(i) {
            $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
          });
        });
    }
  });

})(jQuery);

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: 18px/1.65 sans-serif;
  text-align: center;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;    
  display: block;
  color: #333;
}

h2 {
  color: #333;
  padding: 10px 0;
}

.filter {
  margin: 30px 0 10px;
}

.filter a {
  display: inline-block;
  padding: 10px;
  border: 2px solid #333;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.boxes a {
  width: 23%;
  border: 2px solid #333;
  margin: 0 1% 20px 1%;
  line-height: 60px;
}

.all {
  background: khaki;
}

.green {
  background: lightgreen;
}

.blue {
  background: lightblue;
}

.red {
  background: lightcoral;
}

.filter a.active:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #333 transparent transparent transparent;
}

.is-animated {
  animation: .6s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.1);
  } 
  100% {
    transform: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta filter">
  <a class="green" data-filter="green" href="#" role="button">Show Green Boxes</a>
  <a class="blue" data-filter="blue" href="#" role="button">Show Blue Boxes</a>
  <a class="red" data-filter="red" href="#" role="button">Show Red Boxes</a>
</div>

<div class="boxes">
  <a class="red" data-category="red" href="#">Box1</a>
  <a class="green" data-category="green" href="#">Box2</a>
  <a class="blue" data-category="blue" href="#">Box3</a>
  <a class="green" data-category="green" href="#">Box4</a>
  <a class="red" data-category="red" href="#">Box5</a>
  <a class="green" data-category="green" href="#">Box6</a>
  <a class="blue" data-category="blue" href="#">Box7</a>
  <a class="red" data-category="red" href="#">Box8</a>
  <a class="green" data-category="green" href="#">Box9</a>
  <a class="blue" data-category="blue" href="#">Box10</a>
  <a class="red" data-category="red" href="#">Box11</a>
  <a class="green" data-category="green" href="#">Box12</a>
  <a class="blue" data-category="blue" href="#">Box13</a>
  <a class="green" data-category="green" href="#">Box14</a>
  <a class="red" data-category="red" href="#">Box15</a>
  <a class="blue" data-category="blue" href="#">Box16</a>
</div>

＆＃13;

Answer 1

我只为你的最小演示添加了两行。

// Onload Show green ones:
 $('a[class="green"]').click();

它显示绿色物品上载。

(function($) {

  'use strict';

  var $filters = $('.filter [data-filter]'),
    $boxes = $('.boxes [data-category]');

  $filters.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    
    $filters.removeClass('active');
    $this.addClass('active');

    var $filterColor = $this.attr('data-filter');

    if ($filterColor == 'all') {
      $boxes.removeClass('is-animated')
        .fadeOut().finish().promise().done(function() {
          $boxes.each(function(i) {
            $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
          });
        });
    } else {
      $boxes.removeClass('is-animated')
        .fadeOut().finish().promise().done(function() {
          $boxes.filter('[data-category = "' + $filterColor + '"]').each(function(i) {
            $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
          });
        });
    }
  });
  
  // Onload Show green ones:
  $('a[class="green"]').click();

})(jQuery);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: 18px/1.65 sans-serif;
  text-align: center;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;    
  display: block;
  color: #333;
}

h2 {
  color: #333;
  padding: 10px 0;
}

.filter {
  margin: 30px 0 10px;
}

.filter a {
  display: inline-block;
  padding: 10px;
  border: 2px solid #333;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.boxes a {
  width: 23%;
  border: 2px solid #333;
  margin: 0 1% 20px 1%;
  line-height: 60px;
}

.all {
  background: khaki;
}

.green {
  background: lightgreen;
}

.blue {
  background: lightblue;
}

.red {
  background: lightcoral;
}

.filter a.active:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #333 transparent transparent transparent;
}

.is-animated {
  animation: .6s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.1);
  } 
  100% {
    transform: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta filter">
  <a class="green" data-filter="green" href="#" role="button">Show Green Boxes</a>
  <a class="blue" data-filter="blue" href="#" role="button">Show Blue Boxes</a>
  <a class="red" data-filter="red" href="#" role="button">Show Red Boxes</a>
</div>

<div class="boxes">
  <a class="red" data-category="red" href="#">Box1</a>
  <a class="green" data-category="green" href="#">Box2</a>
  <a class="blue" data-category="blue" href="#">Box3</a>
  <a class="green" data-category="green" href="#">Box4</a>
  <a class="red" data-category="red" href="#">Box5</a>
  <a class="green" data-category="green" href="#">Box6</a>
  <a class="blue" data-category="blue" href="#">Box7</a>
  <a class="red" data-category="red" href="#">Box8</a>
  <a class="green" data-category="green" href="#">Box9</a>
  <a class="blue" data-category="blue" href="#">Box10</a>
  <a class="red" data-category="red" href="#">Box11</a>
  <a class="green" data-category="green" href="#">Box12</a>
  <a class="blue" data-category="blue" href="#">Box13</a>
  <a class="green" data-category="green" href="#">Box14</a>
  <a class="red" data-category="red" href="#">Box15</a>
  <a class="blue" data-category="blue" href="#">Box16</a>
</div>

如何从开始jquery只显示一个类别

1 个答案: