Jquery 每次单击都可以看到第n个子项-缺少某些内容

我真的很接近这一点，但我错过了一些让它工作的权利。我已经建立了一个新的组织

将鼠标悬停在“第一个过滤器”组上并单击“命名和语音”时，它会正确过滤，并且图像占位符上的边距都是正确的。如果然后单击“数字”（而不重置过滤器），过滤器仍然工作，但边距混乱，因此第一行只有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');
    });

});



});

---

编辑：要澄清这一点，当您第一次单击过滤器时，它会正常工作。任何后续的点击都不会在正确的位置删除边距。因此，缺少的是再次清除所有内容的方法，并在第一个过滤器之后单击任何过滤器时重新应用右边距：0。

我认为您应该为每个过滤器上的所有元素重置右边距：

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

---

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

所以我无法通过JS/jQuery实现这一点。相反，我加宽了包含的div，以避免担心第4个元素上的额外边距。

现在我已经读了几遍了，并不是所有的图像都在计数中，（I+1）%4位处理了这个问题。这是从第一个过滤器到下一个过滤器的过程，由于之前设置的边距被保留而不是重置，因此边距没有被正确清除。