我嘗試在Javascript中編寫過濾器,該過濾器使用標題對不同的內容塊進行排序(標題是過濾器)。 我會試着解釋一下我想要的濾鏡類型。 例如,我3個內容塊第一個是content1,第二個內容是1,2和3,第三個是內容2和3. 我寫了一些內容。像那樣。JavaScript過濾器數組在單擊/多選項上有元素
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,但我不知道怎麼用這個去...
這個工程,但我得到一個循環 – maxal95