Javascript 向基于同位素的站点添加过滤器内容

我使用同位素创建了一个站点，当你点击其中一个过滤器时，添加项目时遇到了问题

这是我用于筛选的脚本：

<script type="text/javascript">
    // cache container
    var $container = $('#container');
    // initialize isotope
    $container.isotope({
        filter: '.front'
    });   

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

//缓存容器
var$container=$（“#container”）；
//初始化同位素
$container.com({
筛选器：'.front'
});   
//单击筛选链接时筛选项目
$（“#过滤器a”）。单击（函数（）{
变量选择器=$（this.attr（'data-filter'）；
$container.同位素（{filter:selector}）；
返回false；
});

虽然效果很好，但我在添加或取消隐藏内容时遇到了问题

我曾尝试将其应用到我的代码中，但我对javascript不太在行，而且总是一败涂地

下面是我正在使用的html示例

<li><a href="#filter" data-filter=".identity, .menufilter">&mdash; Brand Identity</a></li>
<li><a href="#filter" data-filter=".guidelines, .menufilter">&mdash; Brand Guidelines</a></li>
<li><a href="#filter" data-filter=".photography, .menufilter">&mdash; Brand Photography</a></li>
<li><a href="#filter" data-filter=".digital, .menufilter">&mdash; Digital</a></li>


<div class="item cols-1 rows-1 identity">
    <span class="new-wrapper">
        <div class="post-thumb clearfix">
            <a title="Eternal friendship" href="#">
                <img src="images/thumbs/oxford.jpg" alt="brain" width="200" height="133"/>
            </a>
        </div>
        <a href="#"><span>
            <h2></h2> 
            <p>
                <p></p>
            </p>
        </span></a>
    </span>
</div>

任何帮助或指导都将是卓越的。我还研究了同位素附带的插入法，但它远远超出了我的想象，我甚至不知道从哪里开始

提前谢谢

编辑：

这已开始筛选.front类，但其他类的筛选不起作用：

<script type="text/javascript">

$(function() {

 var $container = $('#container'),
    $checkboxes = $('#filters a');

 $container.isotope({
    itemSelector: '.item'
 });

 $container.isotope({
    filter: '.front'
 });

 $checkboxes.change(function() {
    var filters = [];
    // get checked checkboxes values
    $checkboxes.click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({
        filter: filters
    }, function($changedItems, instance) {
        instance.$allAtoms.filter('.isotope-hidden').removeClass('is-filtered');
        instance.$filteredAtoms.addClass('is-filtered');
    });
});
});
</script> 

$（函数（）{
var$container=$（“#container”），
$复选框=$（“#过滤器a”）；
$container.com({
itemSelector:“.item”
});
$container.com({
筛选器：'.front'
});
$checkbox.change（函数（）{
var过滤器=[]；
//获取选中的复选框值
$复选框。单击（函数（）{
变量选择器=$（this.attr（'data-filter'）；
$container.同位素（{filter:selector}）；
返回false；
});
//['.red'，'.blue']->'.red，.blue'
filters=filters.join（'，'）；
$container.com({
过滤器：过滤器
}，函数（$changedItems，实例）{
实例.$allAtoms.filter（'.hidden'）.removeClass（'is-filtered'）；
实例。$filteredAtoms.addClass（'is-filtered'）；
});
});
});

对要在启动时显示的类应用

过滤器

：

$container.isotope({
    filter: '.guidelines, .photography' 
});

本例显示了启动时的两个类别。

---

其他可能破坏该功能的东西是凌乱的HTML/CSS（动画、可见/隐藏元素等）

ps。脚本的过滤器：“.front”部分是尝试过滤我希望首先显示的内容的一部分，只隐藏其他所有内容。ThanksIt将帮助人们回答如果你自己创建一个JSFIDLE我不明白你的问题在哪里？当你点击一个链接时，它应该使用指示的数据属性重新过滤（顺便说一句，你应该使用：

$（this.data（“filter”）

，以便检索数据）…谢谢你的回复。我有一些带有按钮的内容，这些按钮可以在某些类别之间进行过滤，效果很好，但我也希望在用户第一次打开页面时过滤内容，以便某些内容保持隐藏状态，只有在单击按钮时才会显示。对不起，如果我不明白很多对我来说都是新的。我可以发送一个链接到该网站，如果你需要一个参考。再次感谢。我不确定我是否用这个方法找到了错误的树，但我试图设置它，以便在页面上加载$container.同位素（{filter:.front}）；因此，它加载用.front指定的所有类，然后单击按钮时执行$container.同位素（{filter:selector}）；并筛选到.identity.guidelines。摄影或数码取决于点击的按钮。后者起作用，但页面上的过滤内容加载到.front类则不起作用。