I try to write an filter in Javascript, which sorts different content blocks with headlines (the headlines are the filters). I´ll try to explain what kind of filter I want to have. For example I´ve 3 contentenblocks the first is only content1 the secont is content 1,2 and 3 and the third is content 2 and 3. I wrote sth. like that.
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 sth like that
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();
});
});
I tried to do sth with arrays und array. IndexOf but I do not know how to go on with this...
You can add a class to main div and show hide its child according to filter please see below code
<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();
});
});
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();
};
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.