Question

我真的很接近这个，但我错过了让它正常工作的东西。我已经设置了test page here。

将鼠标悬停在第一个过滤器组上并点击Naming＆amp;语音，它正确过滤，图像占位符上的边距都是正确的。如果你然后点击数字（没有重置过滤器），过滤器仍然可以工作，但边缘混乱，所以第一行只有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在第一个之后点击任何过滤器时为0.

Answer 1

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

Answer 2

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

if ((i+1) % 4 == 0) $(this).css('margin-right', '0');
else $(this).css('margin-right', '8px');

Answer 3

所以我无法通过JS / jQuery实现这一点。相反，我扩大了包含div而不用担心第4个元素的额外余量。

每次点击都可见第n个孩子 - 缺少一些东西

3 个答案: