Question

有人能够在同位素中创建一个下拉菜单栏吗？我在这里已经阅读了一些参考资料但没有实现。我在jsfiddle上找到了这个示例，虽然我正在寻找像this这样的五个下拉按钮，这些按钮也适用于视频。感谢任何帮助！

HTML

<div id="filters">
    <select>
        <option value="*">All</option>
        <option value=".red">Red</option>
        <option value=".green">Green</option>
        <option value=".blue">Blue</option>
        <option value=".yellow">Yellow</option>        
    </select>    
</div>

<div id="container">
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
</div>

JAVASCRIPT

$(function() {
    var $container = $('#container'),
    $select = $('#filters select');

    $container.isotope({
        itemSelector: '.item'
    });

    $select.change(function() {
        var filters = $(this).val();
        $container.isotope({
            filter: filters
        });
    });
});

Answer 1

您有两个选择：

1：http://codepen.io/desandro/pen/jubmr

$( function() {
    // init Isotope
    var $container = $('.isotope').isotope({
        itemSelector: '.element-item',
        layoutMode: 'fitRows'
    });
    // filter functions
    var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
        var number = $(this).find('.number').text();
        return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
        var name = $(this).find('.name').text();
        return name.match( /ium$/ );
    }
};

// bind filter on select change
$('#filters').on( 'change', function() {
        // get filter value from option value
        var filterValue = this.value;
        // use filterFn if matches value
        filterValue = filterFns[ filterValue ] || filterValue;
        $container.isotope({ filter: filterValue });
    });
});

2：使用html dropDown列表

Answer 2

是的我有同样的问题，我希望过滤5下拉菜单。试图达到目标。我从下拉列表的所有选定值的组合中获取了过滤器字符串，并将其设置为filer同位素。就像，我的容器有4-5种不同的元素，如体型，膳食类型，蛋白质，饮食 - PERFRENCE等。但是当我从下拉列表中选择所有值时，例如来自体型：varbs，来自Meal类型：smoothy，来自Protein：Pork然后不会过滤物品，因为有些记录有数据过滤器分开像smoothy或猪肉等因为当我的过滤器是.carbs.smoothey然后它不会显示任何记录它隐藏所有记录:(因为我没有所有属性的记录。但记录有单独的属性，那么为什么它显示这样的记录，其中至少有一个属性来自选定的下拉值

如此实现以下代码，现在继续我的任务。如果有人知道如何解决这个问题，请告诉我

我做了以下代码：

jQuery(window).load(function(){    
    var $container = jQuery("#content");

    $container.isotope({
        filter: "*",
        animationOptions: {
            duration: 750,
            easing: "linear",
            queue: false,
        },
        itemSelector: ".span4",
        layoutMode: "fitRows"
    });

    $("#bodytype-1").change(function(){
        $( "#bodytype-1 option:selected" ).each(function() {    
            selector1 = $(this).attr("data-filter");             
            document.getElementById("bodytype-1").setAttribute("data-active",selector1);   
            reorder(1);
            return false;
        });
    }); 

    $("#bodytype-2").change(function(){
        $( "#bodytype-2 option:selected" ).each(function() {
            selector2 = $(this).attr("data-filter");           
            document.getElementById("bodytype-2").setAttribute("data-active",  selector2);   
            reorder(2);
            return false;   
        });
    });

    $("#bodytype-3").change(function(){
        $( "#bodytype-3 option:selected" ).each(function() {
            selector3 = $(this).attr("data-filter");           
            document.getElementById("bodytype-3").setAttribute("data-active", selector3);   
            reorder(3);
            return false;
        });
    });

    $("#bodytype-4").change(function(){
        $( "#bodytype-4 option:selected" ).each(function() {
            selector4 = $(this).attr("data-filter");           
            document.getElementById("bodytype-4").setAttribute("data-active", selector4);   
            reorder(4);
            return false;   
        });
    });

    function reorder( k ){
        var bodytype = $("#bodytype-"+k).attr("data-active");
        if (typeof bodytype === "undefined") {
             bodytype = "";
        }
        var filterString = bodytype;      
        if(filterString=="*"){
            filterString = "*"; 
        }
        $container.isotope({
            filter: filterString,
            animationOptions: {
                duration: 750,
                easing: "linear",
                queue: false,
            },
            itemSelector: ".span4",
            layoutMode: "fitRows"
        });
    }
});

有人创建了同位素下拉菜单

2 个答案: