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

     }); 
    });