Javascript过滤器数组具有单击/多个选项的元素

Question

我尝试用 Javascript 编写一个过滤器，它用标题对不同的内容块进行排序（标题是过滤器）。 我将尝试解释我想要什么样的过滤器。 例如，我有 3 个内容块，第一个只是内容 1，第二个是内容 1,2 和 3，第三个是内容 2 和 3。 我写了某事。像这样。

HTML：

                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-4 text-center">                              
                                        <div id="filter1" class="filter_btn">
                                            Filter 1
                                        </div>                                       
                                </div>
                               <div class="col-xs-12 col-sm-6 col-md-4 text-center">                           
                                        <div id="filter2" class="filter_btn">
                                            Filter 2
                                        </div>                                      
                                </div>
                               <div class="col-xs-12 col-sm-6 col-md-4 text-center">                                     
                                        <div id="filter3" class="filter_btn">
                                            Filter 3
                                        </div>                                       
                                </div>


                                <div class="col-xs-12 col-sm-6 col-md-4 text-center ">                                        
                                        <div class="filter_check">
                                            filter checker
                                        </div>                                        
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-4 text-center ">                                 
                                        <div class="filter_clear">
                                            filter clear
                                        </div>                                   
                                </div>
                            </div>

                           <div class="container">


                                <div class="row">
                                    <div class="col-xs-12 text-left st_dis_none filter1 filter1_only">
                                        <a href="">
                                            <div class="col-xs-12 col-sm-9 no-padding">

                                                    <h4>filter1 only content</h4>


                                    </div>

                                    <div class="col-xs-12 text-left st_dis_none  filter1 filter2 filter3">
                                        <a href="">
                                            <div class="col-xs-12 col-sm-9 no-padding">

                                                    <h4>filter1 and filter2 and filter 3</h4>

                                            </div>
                                        </a>
                                    </div>

                                                         <div class="col-xs-12 text-left st_dis_none   filter2 filter3">
                                        <a href="">
                                            <div class="col-xs-12 col-sm-9 no-padding">

                                                    <h4>filter2 and filter 3</h4>

                                            </div>
                                        </a>
                                    </div>

JS 之类的

    var array = new Array();

$(function () {

    $('.filter_btn').click(function () {
        array.push(this.id);

    });

    $('.filter_clear').click(function () {
       $(".post").hide();
        array = [];


    });

    $('.filter_check').click(function () {
        alert(array);

    });


});




$(function () {
    $('#filter1').click(function () {


            $(".filter2:not(.filter1_only .filter1)").hide();
            $(".filter3:not(.filter1_only .filter1)").hide();
            $(".filter1").show();

                               });
    });

//
$(function () {
    $('#filter2').click(function () {

            // $(".filter1_only:not(.filter2_only .filter2)").hide();
            // $(".filter3_only:not(.filter2_only .filter2)").hide();

            $(".filter2").show();

    });
});
$(function () {
    $('#filter3').click(function () {

            // $(".filter1_only:not(.filter3_only .filter3)").hide();
            // $(".filter2_only:not(.filter3_only .filter3)").hide();

            $(".filter3").show();

    });
});

我试图用数组和数组来做某事。 IndexOf 但我不知道该怎么做...

DEMO Code-Pen

Answer 1

您可以在主 div 中添加一个类并根据过滤器显示隐藏其子项，请参见下面的代码

<div class="row mainfilter">
            <div class="col-xs-12 text-left st_dis_none filter1 filter1_only">
                <a href="">
                    <div class="col-xs-12 col-sm-9 no-padding">

                        <h4>filter1 only content</h4>


                    </div>
                    </div>

                    <div class="col-xs-12 text-left st_dis_none  filter1 filter2 filter3">
                        <a href="">
                            <div class="col-xs-12 col-sm-9 no-padding">

                                <h4>filter1 and filter2 and filter 3</h4>

                            </div>
                        </a>
                    </div>

                    <div class="col-xs-12 text-left st_dis_none   filter2 filter3">
                        <a href="">
                            <div class="col-xs-12 col-sm-9 no-padding">

                                <h4>filter2 and filter 3</h4>

                            </div>
                        </a>
                    </div>
            </div>

Javascript

$(function () {
        $('#filter1').click(function () {


            $(".mainfilter").children().hide();
            $(".filter1").show();

        });
    });

    //
    $(function () {
        $('#filter2').click(function () {

            // $(".filter1_only:not(.filter2_only .filter2)").hide();
            // $(".filter3_only:not(.filter2_only .filter2)").hide();
            $(".mainfilter").children().hide();
            $(".filter2").show();

        });
    });
    $(function () {
        $('#filter3').click(function () {

            // $(".filter1_only:not(.filter3_only .filter3)").hide();
            // $(".filter2_only:not(.filter3_only .filter3)").hide();
            $(".mainfilter").children().hide();
            $(".filter3").show();

        });
    });

Answer 2

    var fil1 = "";
var fil2 = "";
var filcomp = "";




$(function func() {



/*Filter 1*/
$("#Filter_btn_1").click(function () {
    fil1 = ".filter_option1";
    filter();
});
$("#Filter_btn_2").click(function () {
    fil1 = ".filter_option2";
    filter();
});
$("#Filter_btn_3").click(function () {
    fil1 = ".filter_option3";
    filter();
});

/*Filter 2*/
$("#Filter_btn_4").click(function () {
    fil2 = ".filter_option4";
    filter();
});
$("#Filter_btn_5").click(function () {
    fil2 = ".filter_option5";
    filter();
});
$("#Filter_btn_6").click(function () {
    fil2 = ".filter_option6";
    filter();
});



filcomp = fil1 + fil2;



$('.filter_btn').click(function () {


    $(".filter_btn").removeClass("filter_selected");
    $(this).addClass("filter_selected");
});

$('.filter_btn2').click(function () {


    $(".filter_btn2").removeClass("filter_selected");
    $(this).addClass("filter_selected");
});


$('.filter_reset_btn').click(function () {
    location.reload();

});

function filter() {
    alert(filcomp);
    func();
    $(".post").hide();
    $("div").filter(filcomp).show();
};

});