0

我正在制作一个投资组合页面，并正在使用“Isotope.js”来完成所有繁重的工作......但是，我正试图将过滤器放在一个下拉列表中以实现移动兼容性并且正在碰壁.

我使用“数据过滤器”作为<option />' 值而不是“href”；但是每次您单击一个时，它不会像应有的那样进行过滤，而是尝试将您重定向到名称为“数据过滤器”的页面。

这是按钮的 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

在您的代码中，您创建 select 元素，其选项的值等于锚元素的 data-filter 属性

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

然后将 onchange 事件处理程序绑定到您的选择元素，以便它将您重定向到地址等于选项值的页面（即您的锚点的数据过滤器值）

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

因此，它按预期工作 - 将您重定向到带有“数据过滤器”的页面

我认为在你的情况下，你根本不需要那个 .change 处理程序来让同位素完成它的工作

于 2013-06-11T11:14:54.280 回答