0

我真的很接近这个，但我错过了一些让它正常工作的东西。我在这里设置了一个测试页面。

将鼠标悬停在第一个过滤器组上并单击命名和语音时，它会正确过滤，并且图像占位符上的边距都是正确的。如果您然后单击数字（不重置过滤器），过滤器仍然有效，但边距被弄乱了，因此第一行只有 3 个图像而不是 4 个。

我不确定每次过滤集合时需要在代码中添加什么才能正确设置边距。或者更具体地说，将其设置为每四个项目都没有利润。

这是JS代码：

$(document).ready(function(){



//WORK OVERVIEW FILTERS
$('.nav-secondary.filters .section-inner').each(function(){
    //NAV REVEAL ON HOVER
    var conf = {
        over: function() {
            $(this).find('ul.filter-list,.reset').slideDown(250,'swing');
        },
        timeout: 25,
        out: function() {
            $(this).find('ul.filter-list,.reset').slideUp(250,'swing');
        }
    }
    $(this).hoverIntent(conf);

    //FILTER FUNCTIONS
    var _filter = '';
    var _count = 0;
    $('a.work-filter').click(function(){
        _filter = $(this).data('filter');

        $('.item.work[data-cats*="'+_filter+'"]').each(function(){
            $(this).show(250,'swing');
        });

        $('.item.work:not([data-cats*="'+_filter+'"])').each(function(){
            $(this).hide(250,'swing');
        });


        $('.item.work[data-cats*="'+_filter+'"]:visible').each(function (i) {
            if ((i+1) % 4 == 0) $(this).css('margin-right', '0');
        });





        $('a.work-filter.active').removeClass('active').data('active','no');
        $(this).addClass('active').data('active','yes');
        $('ul.work-filters').find('a.parent.current').removeClass('current');
        $(this).closest('ul').siblings('a.parent').addClass('current');

    });

    $('.reset a').click(function(){
        $('.item.work').each(function(){
            $(this).show(250,'swing');
        });
        $('a.work-filter.active').removeClass('active').data('active','no');
        $('ul.work-filters').find('a.parent.current').removeClass('current');
    });

});



});

编辑：澄清一下，当您第一次单击过滤器时，它会正常工作。任何后续单击都不会在正确的位置删除边距。所以缺少的是某种方法可以再次清除它，并在第一次单击任何过滤器时重新应用 margin-right:0 。

4

3 回答 3

1

看起来您需要在自己的数组/对象中设置所有 .active 并从那里计算它们的边距，因为现在，所有图像都被计算在内，包括“display：none”，因此规则似乎被随意应用.

于 2012-12-13T20:07:26.670 回答
0

所以我无法通过 JS/jQuery 来实现它。相反，我扩大了包含 div 以不担心第 4 个元素的额外边距。

于 2012-12-13T23:35:45.873 回答
0

margin-right我认为您应该为每个过滤的所有元素重置：

if ((i+1) % 4 == 0) $(this).css('margin-right', '0');
else $(this).css('margin-right', '8px');
于 2012-12-13T19:15:23.477 回答