1

私はこれを理解するのに苦労しています-私は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 の値は次のようになります。つまり、&#x0037;各フィルター カテゴリ (Web、写真、グラフィックス) を特定の data-icon 値にリンクする必要があります。

何か案は？

4

3 に答える 3

1

これを試して

$("#thumbs li a span").each(function(){
    var cls=$(this).closest('li').attr('class');
    $(this).attr({'class':cls, 'data-icon':cls });
});

デモ。ブラウザのインス​​ペクタツールでソースを見る。

結果：

<span aria-hidden="true" data-icon="web" class="web"></span>
<span aria-hidden="true" data-icon="graphics" class="graphics"></span>
<span aria-hidden="true" data-icon="photography" class="photography"></span>

更新:また、アイコンの名前を事前定義されたオブジェクトに保持してから使用することもできます。

var icons={'web':'globe', 'graphics':'picture','photography':'photo'};
$("#thumbs li a span").each(function(){
    var cls=$(this).closest('li').attr('class');
    $(this).attr({'class':cls, 'data-icon':icons[cls] });
});

DEMO .ブラウザのインス​​ペクタツールでソースを見る。

結果：

<span aria-hidden="true" data-icon="globe" class="web"></span>
<span aria-hidden="true" data-icon="picture" class="graphics"></span>
<span aria-hidden="true" data-icon="photo" class="photography"></span>
于 2012-10-01T18:56:01.483 に答える
0

これを試して

$("#thumbs li a").each(function(){
    var $this = $(this);
    var $thisparent = $(this).parent();
    var $span = $thisparent.find('span');

    $span.addClass($thisparent.attr('class'));  
    $span.data('icon',$thisparent.attr('class')); 
});
于 2012-10-01T18:42:45.283 に答える
0

これはあなたのために働くはずです

// 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')); 
    $span.data('icon',$thisparent.attr('class')); 
});
于 2012-10-01T18:43:08.900 に答える