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

我真的很接近这个，但我错过了一些东西让它正常工作。我建立了一个test page here。每次点击可见的第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'); 
    }); 

}); 



});

编辑：为了澄清，当你第一次点击过滤器，它的作品，因为它应该。这是任何后续点击，保证金不会在正确的位置被删除。所以缺少的是一些方法来清除所有的问题，并重新应用margin-right：0在第一个点击之后点击任何过滤器。

来源

2012-12-13 Angie Herrera

我想你应该为每个过滤所有元素复位margin-right：

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

来源

2012-12-13 19:15:23

嗯，这似乎不工作。我得到相同的结果。：/ –

看起来你需要设置所有。主动在自己的数组/对象，并从那里指望他们的利润率，如右图现在，所有图像都被计算在内，包括“显示：无”，因此规则似乎被随意应用。

来源

2012-12-13 20:07:26

这可能是另一种方法，我将不得不考虑... –

现在我已经阅读了几次，并非所有的图像都被计算在内 - （i + 1）％4位需要注意那个。它正在从第一个过滤器转到下一个过滤器，因为先前设置的边距保留而不是重置，所以边缘无法正确清除。 –

所以我不能通过JS/jQuery得到这个工作。相反，我扩大了包含div，不用担心第四个元素上的额外余量。

来源

2012-12-13 23:35:45

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

回答

相关问题