0
我不知道很多的jQuery，我只知道CSS和HTML，但我猜我需要做的很簡單。如何只顯示一個類別從開始jquery
我在某處抓取了一個代碼並將其修改爲一個類別過濾器。
這是我所做的一切。
，一切工作正常。
我想要做的唯一事情是：當它首先加載時，只顯示一個特定的類別...並非全部。
這裏是原來的代碼我抓起：
（礦山具有一定的西班牙語單詞，哪些是不相關的長SVG路徑）
(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);* {
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>
向我們展示你的HTML代碼，並告訴我們你想用它 –
我加入了原來的代碼段，這樣它更清晰了我想做的事，當第一次加載頁面我想實現什麼只顯示綠色框，並不是所有類別......謝謝！ –
你的問題有所有可能被解釋爲：*«請幫我從我複製/粘貼的代碼編碼...我真的不在乎理解。它應該只做我想要的。我會告訴你。你告訴代碼。感謝懶人們的免費編碼。»* –