0

フィルタメソッドでjQueryIsotopeを使用しています：http：//isotope.metafizzy.co/demos/filtering.html

フィルタをクリックしたときに機能を追加したいと思います。フィルタごとに異なるapテキストが表示されます。

今のところ、私は同じテキストしか持ち出すことができません。カテゴリごとに異なるものを作成する方法を知りたいのですが、これはフィルタをクリックしたときにのみ表示されます。これが私のjsFiddleです：http：//jsfiddle.net/itzuki87/Xy5pZ/

var $container = $('#container');
$container.isotope({
});

$('#filters a').click(function(){
 var selector = $(this).attr('data-filter');
  $(".text_category").slideUp(500);
  $(".text_category").slideDown(500);
 $container.isotope({ filter: selector });
return false;
});

誰か助けてもらえますか？ありがとうございました。

4

2 に答える 2

1

次のように、pのデータフィルターに追加されたクラスを使用できます。

<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".metal">metal</a></li>
<li><a href="#" data-filter=".transition">transition</a></li>

そして段落

<p class="text_category hide" data-category="*">
Donec auctor faucibus libero ...
</p>
<p class="text_category hide" data-category=".metal">
metal para
</p>
<p class="text_category hide" data-category=".transition">
transition para content here
</p>

そしてjs

$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
    alert(selector);
    $(".text_category").hide();  //hide all p's
    $("p[data-category='"+selector+"']").slideUp(500); //show respective
    $("p[data-category='"+selector+"']").slideDown(500);
    $container.isotope({ filter: selector });
    return false;
});

デモ：更新されたフィドル

于 2013-01-25T12:13:13.313 に答える
0

ifステートメントでセレクターをチェックしてから、テキストを含むdivのhtmlを置き換えるajaxスクリプトでテキストを変更するか、実際にすべてのdivを出力してjQueryを介して非表示/表示することができます。

于 2013-01-25T12:11:05.787 に答える