jQuery Isotope 与每个过滤器的文本答案

【问题标题】：jQuery Isotope with text for every filterjQuery Isotope 与每个过滤器的文本
【发布时间】：2013-01-25 20:47:45
【问题描述】：

我正在使用带有过滤方法的 jQuery Isotope：http://isotope.metafizzy.co/demos/filtering.html

我想在您单击过滤器时添加一个附加功能：显示的 p 文本，每个过滤器都不同。

目前，我只能调出相同的文字。我想知道如何为每个类别创建一个不同的类别，仅当您单击过滤器时才会显示，这是我的 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;
});

谁能帮帮我？谢谢。

【问题讨论】：

标签： jquery filtering jquery-isotope

【解决方案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;
});

演示：Updated Fiddle

【讨论】：

我试过了，但它不会让我投票，因为我是 Stack Overlow 的新手（投票需要 15 声望，而我有 0 声望），我通过几次试验自己做所有事情和错误，我寻求帮助只是作为最后的希望:) 我必须正确回答至少一个问题，但在这里似乎他们都比我好！

【解决方案2】：

您可以使用 if 语句检查选择器，然后使用 ajax 脚本更改文本，替换包含文本的 div 的 html，或者实际打印每个 div 并通过 jQuery 隐藏/显示它们。

【讨论】：