0

私はこれに本当に近づいていますが、それを正しく機能させるために何かが欠けています。ここにテストページを設置しました。

最初のフィルター グループにカーソルを合わせて [命名と音声] をクリックすると、適切にフィルター処理され、画像プレースホルダーの余白がすべて正しくなります。その後、(フィルタをリセットせずに) [デジタル] をクリックすると、フィルタは引き続き機能しますが、余白が台無しになり、最初の行に 4 つではなく 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

margin-right各フィルタリングのすべての要素をリセットする必要があると思います：

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

そのため、JS/jQueryを介してこれを機能させることができませんでした。代わりに、4 番目の要素の余分なマージンを気にしないように、含まれている div を広げました。

于 2012-12-13T23:35:45.873 に答える