JavaScript过滤器数组在单击/多选项上有元素

Question

我尝试在Javascript中编写过滤器，该过滤器使用标题对不同的内容块进行排序（标题是过滤器）。 我会试着解释一下我想要的滤镜类型。 例如，我3个内容块第一个是content1，第二个内容是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(); 

    }); 
}); 

我试图做与阵列UND阵列某物。的IndexOf，但我不知道怎么用这个去...

DEMO Code-Pen

Answer 1

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

}）;

Answer 2

您可以将类添加到主股利和显示根据过滤器隐藏其子请查看下面的代码

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

     }); 
    });