0

私はポートフォリオページの作成に取り組んでおり、「Isotope.js」を使用してすべての面倒な作業を行っています...しかし、モバイル互換性のためにフィルターをドロップダウンに入れようとしていて、壁にぶつかっています.

<option />「href」の代わりに「data-filter」を値として使用しました。ただし、クリックするたびに、本来のようにフィルタリングするのではなく、「データフィルター」という名前のページにリダイレクトしようとします。

これはボタンのphpです

<nav id="filters">

            <ul>

                <li class="active"><a data-filter="*">All</a></li>

                <?php 
                    global $args;

                    $terms = get_terms( 'filter', $args );
                    $count = count( $terms );
                    $i = 0;
                    $term_list = '';

                    foreach ( $terms as $term ) {
                        $i++;
                        $term_list .= '<li><a data-filter=".'. $term->slug .'">'. $term->name .'</a></li>';
                    }

                    echo $term_list;                
                ?>

            </ul>

        </nav>

脳、JS...

// filter buttons
    jQuery( '#filters a, #filter-drop option' ).click( function() {

        var filterCatagory = jQuery( this ).attr( 'data-filter' );
        $container.isotope( { filter: filterCatagory } );

            return false;
    });

    jQuery( "#filter-drop" ).change( function() {
        var filters = jQuery( this ).val();
        $container.isotope({ filter: filters });
    });

    jQuery( window ).smartresize( function() {
        $container.isotope({
            resizable : false,
            masonry : { 
                columnWidth : $container.width() / 3 
            }
        });
    }).smartresize();

    $container.imagesLoaded( function() {
        jQuery( window ).smartresize();
    });

    // filter Navigation

        jQuery( '<select id="filter-drop" />' ).appendTo( "#filters" );

        jQuery( "<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Filter"
        }).appendTo( "#filters select" );

        jQuery( "#filters a" ).each( function() {
            var el = jQuery( this );
            jQuery( "<option />", {
                "value" : el.attr( "data-filter" ),
                "text"  : el.text()
            }).appendTo( "#filters select" );
        });

        jQuery( "#filters select" ).change( function() {
            window.location = jQuery( this ).find( "option:selected" ).val();
        });

私はjQueryに少し慣れていないので、何かを見落としている可能性があります（そしておそらくそうです）。この件に関する助けがあれば大歓迎です!

トピックのページへのリンクは次のとおりです: http://wordpress-dev.designer17.com/portfolio/

4

1 に答える 1

0

コードでは、アンカー要素の data-filter 属性と等しい値を持つオプションを使用して select 要素を作成します

jQuery( "#filters a" ).each( function() {
        var el = jQuery( this );
        jQuery( "<option />", {
            "value" : el.attr( "data-filter" ),
            "text"  : el.text()
        }).appendTo( "#filters select" );
    });

次に、onchange イベント ハンドラーを select 要素にバインドして、オプション値 (つまり、アンカーのデータ フィルター値) と等しいアドレスを持つページにリダイレクトするようにします。

jQuery( "#filters select" ).change( function() {
        window.location = jQuery( this ).find( "option:selected" ).val();
    });

したがって、想定どおりに機能します-「データフィルター」を使用してページにリダイレクトします

あなたの場合、アイソトープにその仕事をさせるために、その.changeハンドラーはまったく必要ないと思います

于 2013-06-11T11:14:54.280 に答える