0

コードのクリックイベントに関数を追加しようとしています。ちなみに、これはかなりクールなjQueryツールであるIsotope.jsを使用するためのものです。

したがって、以下のコードは次のように機能します<ul>。火災同位体のデータフィルターリンクをクリックします。<li>これにより、data-filterパラメーターに一致するさまざまなデータがページに表示されます。すべて良い。

しかし、1つのサイズを変更する追加のコードがある<li>ので、任意のクリックで次を起動するためにアイソトープが必要です<li>-アイソトープは石積みを使用する動的なページレイアウトツールです。

.isotope( 'reLayout', callback )

これにより、レイアウトプロパティがリセットされ、すべてのアイテム要素がレイアウトされます。参照-isotope.jsリレーアウト

<li>がクリックされたときにリレーアウト関数をトリガーするスクリプト用の別のコードが必要だと思います。

これは私が持っているものです...

<ul><a class="black" href="#" data-filter=".'.$folder.'">'.$folder.'</a> </ul>';

<li><a href="'.$file.'">'.rtrim($name,'.mp3').'</a></li>;

<script>
  $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

$('#container').isotope({
  masonry : {
    columnWidth : 1
  }

 }); 
</script>
4

1 に答える 1

4 
      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

これは、http：//isotope.metafizzy.co/demos/relayout.htmlページがあなたがやろうとしていることを正確に実行するときに使用するコードです。これと同じアプローチがうまくいくはずです。

したがって、$ containerは$（ "＃container"）になり、.elementはコンテナー内の要素と同じになります。これにより、クラス「large」にcssが含まれるクラス「large」が追加または削除され、その要素のサイズが大きくなります。次に、お気づきのように、同位体は「リレーアウト」で呼び出されます。

于 2011-10-17T20:31:38.830 に答える