每次點擊可見的第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個孩子 - 缺少東西

回答

相關問題