私はこれを理解するのに苦労しています-私はJqueryが初めてです。親のクラスに基づいて各要素にアイコンを付けようとしています - ポートフォリオ フィルターで使用するためです (つまり、Web プロジェクトには Web アイコンがあり、グラフィック プロジェクトにはグラフィック アイコンがあります)。
これは私がこれまでに行ったことです(簡略化):
<!-- Project Thumbnails -->
<ul id="thumbs">
<li class="web">
<a name="div1"><span aria-hidden="true" data-icon=""></span><img src="img/project1.png" /></a>
</li>
<li class="graphics">
<a name="div2"><span aria-hidden="true" data-icon=""></span><img src="img/project2.png" /></a>
</li>
<li class="photography">
<a name="div3"><span aria-hidden="true" data-icon=""></span><img src="img/project3.png" /></a>
</li>
</ul>
そして、ここにJqueryがあります:
// Determine span class by parent class
$("#thumbs li a").each(function(){
$this = $(this);
$thisparent = $(this).parent();
$span = $(this).children('span');
$span.addClass($thisparent.attr('class'));
});
そのため、各スパンに親から継承されたクラスを与えることができます。これにより、各プロジェクト カテゴリを異なるスタイルにすることができます。しかし、データ アイコンの値を設定するにはどうすればよいでしょうか。
Icomoonを使用してアイコンを埋め込むので、明らかに data-icon の値は次のようになります。つまり、7
各フィルター カテゴリ (Web、写真、グラフィックス) を特定の data-icon 値にリンクする必要があります。
何か案は?