0

この最初の質問をするのは、次のコードにかなりこだわっているためです。

基本的に:特定のコンテンツに基づいて、div をフィルタリングして、div の表示を切り替えたいと思います。各 div には、いくつかの「タグ」が含まれています。「タグ」をクリックすると、同じ「タグ」を含む div のみが表示されます。と言うとシンプルに見えます。

しかし、私はアイソトープ div コンテナー内で実行しています。さらに重要なことは、外部タグ メニューがないため、トリガーはトグルされる div のすぐ内側にあります。

私は 2 つのパスに直面しています:

$container.isoSelective({
    linkSelector: '.filter',    // this is the filter link 
    attrSelector: 'rel',           // the attribute containing the filter
    activeClass: 'selected'        // class to add to selected
});

しかし、トリガーがターゲット内にある場合、満足していないようです。

  1. 私が既存の JSFiddle コードで行ったフォークは、素晴らしい動作をしますが、今までアイソトープ内で実行することはできません:

    http://jsfiddle.net/gVpqx/3/

—————</p>

そして最後に、htmlページの私のコードからの抜粋です:

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter base-first-tag' rel='.first-tag' href='#'>The Base First Tag</a></em>
<em><a class='filter second-tag' rel='.second-tag' href='#'>The Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter base-first-tag' rel='.base-first-tag' href='#'>The First also Base Tag</a</em>
<em><a class='filter second-tag' rel='.second-tag' href='#'>The Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter first-tag' rel='.first-tag' href='#'>The First Tag</a></em>
<em><a class='filter second-new-tag' rel='.second-new-tag' href='#'>The New Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

以下は IsoSelective アプローチを使用した JSFiddle ですが、それでも機能しません。

http://jsfiddle.net/48nh6/1/

どう思いますか ？

ありがとう

4

1 に答える 1

0

isoSelective はトグルとして機能します。個々のフィルターは組み合わせてオン/オフできます。1 つのフィルターをオンにするか、1 つのフィルターをオフにするかだけではありません。それがあなたが望むものかどうかはわかりませんが、ここに例があります。selectedデモ用にアクティブな ( ) クラスを太字にしました。

http://jsfiddle.net/48nh6/4/ このバージョンでは、タグ クラスをアンカー自体ではなくコンテナに移動したことに注意してください。リンクではなくブロックを表示/非表示 (フィルター処理) したいので、タグ クラスを最上位に移動する必要があります。

  1. 上部の nav フィルター (同位体リストにはありません) を使用して、[すべて] をクリックします。「オフ」になり、すべての要素が非表示になることに注意してください。
  2. 最初のタグをクリックします。太字になることに注意してください。
  3. 3 番目の古いタグをクリックします。これも太字であることに注意してください。最初のタグは太字のままです。2 つの項目が表示されます。1 つは Old First で、もう 1 つは Third Old です。

今。同位体内部のタグで同じ演習を繰り返すことができます。1. 上部のナビゲーションで [すべて] がオンになっていることを確認します。 2. 最初のボックスで [3 番目のタグ] をクリックします。アクティブな項目が 2 つだけであることに注意してください。 3. 最初のボックスで [The Base First Class] をクリックします。3 つすべてが表示されることに注意してください。

また、タグは最初のボックスでのみ「アクティブ」になっていることに注意してください。Box 2 の [The First and also Base Class] をクリックすると、「アクティブ」に切り替わりますが、最初のクラスのために既にアクティブになっています。したがって、何も変わりません (テキストが太字になることを除いて)。

私は2つの選択肢を提供します:

  1. isoselective のような包括的な性質が必要な場合 (つまり、排他的なフィルターではなくトグル)、isoselective をトップレベルのフィルターに接続し、内部フィルターがクリックされたときにそれを「疑似クリック」します。
  2. 等選択性のような包括的性質が必要ない場合は、独自のソリューションを作成してください。

オプション 1: http://jsfiddle.net/gy8Xf/1/

$container.isoSelective({
    linkSelector: '#filters .filter',
    attrSelector: 'rel',
    activeClass: 'selected'
});

#filters .filter のみを選択してから...

$container.find('a').click(function()
                           {
                               var rel = $(this).attr('rel');

                               // get all the #filters .filter elements that have the same rel
                               var $filters = $('#filters .filter').filter(function()
                                                            {
                                                                return $(this).attr('rel') == rel;
                                                            });

                                // trigger a click
                               $filters.click();

                           });

コンテナ内でリンクがクリックされるたびに、クリックされたリンク#filters .filterと同じrel属性を持つ を見つけて、 をトリガーしclickます。

オプション 2: http://jsfiddle.net/9ThvU/1/

$('#filters .filter, #content .filter').click(function()
                           {
                               var rel = $(this).attr('rel');

                               $container.isotope( {filter: rel});
                           });

簡単に言えば、アンカーがクリックされるたびに (#filters を保持していますが、必要かどうかはわかりません)、rel属性に従って新しいアイソトープ フィルターを設定します。

于 2013-01-04T16:15:31.247 に答える