Question

我正在制作一个投资组合页面并使用“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/

Answer 1

在您的代码中，您创建了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事件处理程序绑定到select元素，以便它将您重定向到地址等于选项值的页面（即锚点的数据过滤器值）

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

所以，它按照预期的方式工作 - 将您重定向到带有“数据过滤器”的页面

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

如何防止<option>重定向，而不是像它应该做的那样进行过滤</option>

1 个答案: