Javascript篩選器數組具有單擊/多個選項的元素

Question

我嘗試用Javascript編寫一個過濾器，該過濾器用標題對不同的內容塊進行排序（標題是過濾器）。 我將嘗試解釋我想要哪種過濾器。 例如，我有3個contentenblocks，第一個是content1，第二個是content 1,2和3，第三個是content 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，但我不知道該如何繼續...

演示代碼筆

Answer 1

您可以將一個類添加到main 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>

Java腳本

$(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();
};

}）;