0
jQueryはよくわかりませんが、私はCSSとHTMLしか知りませんが、私がやるべきことはかなり簡単だと思います。最初のjqueryから1つのカテゴリのみを表示する方法
私はコードをどこかにつけて、それを修正してカテゴリフィルタを作成しました。
ここに私がしたことのイメージがあります。
すべてが正常に動作します。
私がしたいのは、最初に読み込まれたときに特定のカテゴリのみを表示するということです。
ここで私がつかんだ元のコードは次のとおり
が（私は、いくつかのスペイン語の単語と関連しない長い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コードを表示し、あなたがそれ –
を達成するために欲しいものを教えてすべてのカテゴリではなく、緑色のボックスのみを表示...ありがとう！ –
あなたの質問は、以下のように解釈される可能性があります：*«私がコピー/ペーストしたものからコーディングを手伝ってください...私は本当に理解する気はありません。それは私が欲しいものだけを行うべきです。言いますよ。あなたはコードを教えます。 * –