0

我正在使用带有过滤方法的 jQuery Isotope：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 语句检查选择器，然后使用 ajax 脚本更改文本，该脚本替换包含文本的 div 的 html，或者实际打印每个 div 并通过 jQuery 隐藏/显示它们。

于 2013-01-25T12:11:05.787 回答