0

ユーザーが「ブランディング」をクリックすると、ブランディングのクラス名が表示され（残りは非表示になります）、ユーザーが印刷デザインをクリックすると、ショーを印刷するだけで動作します。アップなど。

今までアイソトープや流砂を使ってきましたが、今回はエフェクト無しの超基本的なやり方でやってみたいと思いました。そこで、このスクリプトを使用することにしました。jquery は非常に単純です。フィルター リンクと表示/非表示と同じクラスを持つポートフォリオ アイテムを探します。ここにjqueryがあります：

$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
        $('ul#portfolio li.hidden').show().removeClass('hidden');
    } else {

        $('ul#portfolio li').each(function() {
        if(!$(this).hasClass(filterVal)) {
            $(this).hide().addClass('hidden');
        } else {
            $(this).show().removeClass('hidden');
        }
    });
    }

    return false;
});

私のヘッダー/ナビゲーションには、これらのフィルター可能なリンクをすべて含むナビゲーションがあります。ナビゲーションの「作業」の下に、フィルター可能なすべてのオブジェクトがあります。ユーザーが [ブランディング] をクリックすると、作業ページに移動し、すべてのポートフォリオ アイテムが表示されます (ブランディング アイテムだけではありません)。これは、この jquery スクリプトがハッシュ タグをサポートしていないためです。つまり、フィルタリングされたポートフォリオの各状態には、関連付けられた URL がありません。この機能を追加しようとしていますが、どこから始めればよいかわかりません。

まさに私が必要としているソリューションのように見えるhashchange プラグインがあることに気付きました。ハッシュタグのサポートを追加したり、この hashchange プラグインでハッシュタグを使用したりする方法について、誰か助けてもらえますか? 前もって感謝します！

4

1 に答える 1

0

これがこの問題を処理する最善の方法かどうかはわかりませんが、私が思いついた解決策は、ナビゲーション内のすべてのアンカー リンクにハッシュタグを割り当てることです。そして、次のjqueryを適用して機能させました。

var thispage = window.location.hash;

if(thispage == ''){
    $('ul#filter li:nth-child(1)').addClass('current');
}
if(thispage == '#brand-id'){
    $('ul#filter li:nth-child(2)').addClass('current');
}
if(thispage == '#print'){
    $('ul#filter li:nth-child(3)').addClass('current');
}
if(thispage == '#book-and-editorial'){
    $('ul#filter li:nth-child(4)').addClass('current');
}
if(thispage == '#web'){
    $('ul#filter li:nth-child(5)').addClass('current');
}
if(thispage == '#packaging'){
    $('ul#filter li:nth-child(6)').addClass('current');
}
if(thispage == '#exhibit'){
    $('ul#filter li:nth-child(7)').addClass('current');
}

var currentpage = thispage.replace('#','');

$('ul#portfolio li').each(function() {
    if(!$(this).hasClass(currentpage)) {
        $(this).hide().addClass('hidden');
    } else {
        $(this).show().removeClass('hidden');
    }
});

肥大化しているように見えますが、おそらく元のスクリプトに組み込むなど、これを行うためのより良い方法はありますか?

于 2012-05-03T19:37:24.433 に答える