I am a newbee so I hope my explanation makes sense.
I am setting up a product list page with a checkbox filter section. I would like to be able to pre-select options and apply the filter/function based on the url hash of a link from a previous page.
I have js for my filter function...
$('.category').on('change', function(){
var category_list = [];
$('#filters :input:checked').each(function(){
var category = $(this).val();
category_list.push(category); //Push each check item's value into an array
});
if(category_list.length == 0) {
$('.resultblock').fadeIn();
}
else {
$('.resultblock').each(function(){
var item = $(this).attr('data-tag');
if(jQuery.inArray(item,category_list) > -1){ //Check if data-tag's value is in array
$(this).fadeIn('slow');
}
else{
$(this).fadeOut('fast');
}
});
}
});
and js to pre-check a checkbox based on the url hash...
$(document).ready(function(){
var hash = location.hash;
if(hash=="#myHash"){
$("#check1").prop("checked", !$("#check1").prop("checked"));
}
});
Here is also my html, if that is helpful.
<div class="filter--container">
<div id="filters">
<div class="filterblock">
<input id="check1" type="checkbox" name="check" value="filter1" class="category">
<label class="checkbox-label" for="check1">Filter 1</label>
</div>
<div class="filterblock">
<input id="check2" type="checkbox" name="check" value="filter2" class="category">
<label class="checkbox-label" for="check2">Filter 2</label>
</div>
</div>
</div>
<div class="resultblock" data-tag="filter1">
MyContent
</div>
<div class="resultblock" data-tag="filter2">
MyContent
</div>
Link on previous page...
<a href="www.domain.com/#myHash" id="select-checkbox1">link</a>
What I would like to happen is, by clicking on the link it will take you to the product listing page and the content will automatically be filtered and the checkbox select. However, now it is checking the box but not performing the filter function.
Any help would be appreciated. Thank you!!
Aucun commentaire:
Enregistrer un commentaire